flytta position på div-element
jag ska få ett div element att flytta position varje gång jag klickar på knappen.. men får inte ens den att vara röd så jag gör en massa fel.
kod:
<script>
function byta()
{
var div = document.GetElementById("diven");
div.style.position = "absolute";
div.style.color = "red";
div.addEventListener("click",function()
{
div.style.top = Math.floor(Math.random()*document.body.div);
div.style.left = Math.floor(Math.random()*document.body.div);
});
document.body.appendChild(div);
}
</script>
</head>
<body>
<form>
<input type="button" value="byta plats" onClick="byta()">
<div id="diven" ><h1>Hej</h1></div>
Är det förgrunds- eller bakgrundsfärg du ska byta?
Ska du ändra positionen behöver du också läsa av aktuell position. Det gör du inte med din kod.
Ett tips är att använda alert() för att visa värden i en liten popup-ruta. Testa det på t.ex. document.body.div. Får du förväntat resultat?
jag ville ha texten röd men det löste jag så dumt fel. men får inte till positionsbytet men ska testa med alert()
Jag rekommenderar att sätta på developer-console e.dyl, om du har det i din browser (ctrl+shift+i i chrome).
Då ser du att du råkat stava fel till getElementById (ska vara litet g).
Sedan multiplicerar du båda randomvärdena med document.body.div, jag misstänker att du var ute efter offsetHeight och offsetWidth eller liknande.
tack jek7!
tanken är att ordet(div-elementet) ska få nya x och y koordinater..slumpmässigt
om min kod ser ut såhär funkar det jätte bra dock fryser allt om jag försöker lägga till : style="color:red" om jag lägger in den i funktionen blir den röd men först efter att jag klickat på knappen såkalrt. vart borde jag lägga in "färgen" om jag vill ha den röd från början då sidan startar?
<script>
function byta()
{
var div = document.getElementById("diven");
div.style.top = Math.floor(Math.random() * document.body.clientHeight);
div.style.left = Math.floor(Math.random() * document.body.clientWidth);
}
</script>
</head>
<body>
<form>
<input type="button" value="byta plats" onClick="byta()">
<div id="diven" style="position: absolute"><h1>Hej</h1></div>
</form>
</body>
Verkar som att du behöver läsa på lite grundläggande HTML.
Ifall att texten hela tiden ska vara röd så måste du specificera det hos din text. Detta gör du med css. Din text finns innanför en headings HTML tag.
<h1>Hej</h1>
I HTML kan du direkt lägga till stil för taggar. T.ex på din <h1>.
Du gör på samma sätt som du gjort för att ge din <div> stilen position. Ge din <h1> en style="color:red".
<h1 style="color:red" >Hej</h1>
Nu bör texten hela tiden ha en röd färg.
nutella143 skrev:om min kod ser ut såhär funkar det jätte bra dock fryser allt om jag försöker lägga till : style="color:red" om jag lägger in den i funktionen blir den röd men först efter att jag klickat på knappen såkalrt. vart borde jag lägga in "färgen" om jag vill ha den röd från början då sidan startar?
<script>
function byta()
{
var div = document.getElementById("diven");
div.style.top = Math.floor(Math.random() * document.body.clientHeight);
div.style.left = Math.floor(Math.random() * document.body.clientWidth);
}
</script>
</head>
<body>
<form>
<input type="button" value="byta plats" onClick="byta()">
<div id="diven" style="position: absolute"><h1>Hej</h1></div>
</form>
</body>
Om du tvunget måste lägga till röd färg - oavsett om bakgrund eller förgrund via JS, så ska det läggas utanför din function byta() kod. Tänk dock på att du borde ha en document.addEventListener("DOMContentLoaded", function() {
// wrapper för kod som ska köras efter DOM element har laddats in på hemsidan
});
Runt din kod så du vet att din DIV bör finnas tillgänglig för att arbeta med.
Därefter är det bara en fråga om att "hämta" din #diven via .getElementById som du hade innan, och därefter applicera .style på elementet där du sätter CSS-attributet background-color för bakgrundsfärg alternativt color för textfärg ("förgrundsfärg") :)
Hoppas det hjälper något! Lycka till ^^
