8 svar
564 visningar
nutella143 74 – Fd. Medlem
Postad: 28 aug 2018 12:53

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 67
Postad: 28 aug 2018 13:30

Ä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 74 – Fd. Medlem
Postad: 28 aug 2018 14:07 Redigerad: 28 aug 2018 14:28

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 35 – Fd. Medlem
Postad: 29 aug 2018 08:19

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 74 – Fd. Medlem
Postad: 29 aug 2018 11:23 Redigerad: 29 aug 2018 11:26

tack jek7!

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

nutella143 74 – Fd. Medlem
Postad: 30 aug 2018 10:23

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 67
Postad: 30 aug 2018 11:08

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

Här är en bra sajt

IGIL 43
Postad: 30 aug 2018 17:44 Redigerad: 30 aug 2018 17:46

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.

zino92 63
Postad: 12 nov 23:46
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 ^^

Svara
Close