7 svar
102 visningar
nutella143 76
Postad: 28 aug 2018

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>

JockeR 14
Postad: 28 aug 2018

Ä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?

nutella143 76
Postad: 28 aug 2018 Redigerad: 28 aug 2018

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()

jek7 25
Postad: 29 aug 2018

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.

nutella143 76
Postad: 29 aug 2018 Redigerad: 29 aug 2018

tack jek7!

tanken är att ordet(div-elementet) ska få nya x och y koordinater..slumpmässigt

nutella143 76
Postad: 30 aug 2018

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>

JockeR 14
Postad: 30 aug 2018

Verkar som att du behöver läsa på lite grundläggande HTML.

Här är en bra sajt

IGIL 65
Postad: 30 aug 2018 Redigerad: 30 aug 2018

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.

Svara Avbryt
Close