Vinnaren i pepparkakshustävlingen!
2018-05-31, 12:28
  #1
Medlem
jag ska göra en sida som har ett div-element som det står "Hej" i med absolutpositionering samt en knapp.
När jag sen trycker på knappen ska ordet få en ny x och y position slumpad fram så att texten flyttar sig.


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>
	</form>
Citera
2018-05-31, 12:32
  #2
Medlem
Citat:
Ursprungligen postat av mssoulstar
jag ska göra en sida som har ett div-element som det står "Hej" i med absolutpositionering samt en knapp.
När jag sen trycker på knappen ska ordet få en ny x och y position slumpad fram så att texten flyttar sig.


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>
	</form>

Vad är frågan?
Citera
2018-05-31, 12:50
  #3
Medlem
Live demo;
https://jsfiddle.net/03p4xLf3/

Kod med jQuery;

HTML-kod:
<script>
  $(function() {
    byta();
  })

  function getRandomInt(max) {
    return Math.floor(Math.random() * Math.floor(max));
  }

  function byta() 
  {
    var div = $("#diven");
    var x = getRandomInt(div.parent().width());
    var y = getRandomInt(div.parent().height());
    div.css({position:"absolute", left:x, top:y})
  }
</script>
</head>

<body>
  <form style="height: 400px; width: 600px">
    <input type="button" value="byta plats" onClick="byta()">
    <div id="diven"><h1>Hej</h1></div>
  </form>
</body>
__________________
Senast redigerad av Itzelsnitch 2018-05-31 kl. 12:56.
Citera
2018-05-31, 14:05
  #4
Medlem
kalkryggars avatar
Citat:
Ursprungligen postat av Itzelsnitch
Live demo;
https://jsfiddle.net/03p4xLf3/

Kod med jQuery;

HTML-kod:
<script>
  $(function() {
    byta();
  })

  function getRandomInt(max) {
    return Math.floor(Math.random() * Math.floor(max));
  }

  function byta() 
  {
    var div = $("#diven");
    var x = getRandomInt(div.parent().width());
    var y = getRandomInt(div.parent().height());
    div.css({position:"absolute", left:x, top:y})
  }
</script>
</head>

<body>
  <form style="height: 400px; width: 600px">
    <input type="button" value="byta plats" onClick="byta()">
    <div id="diven"><h1>Hej</h1></div>
  </form>
</body>

Jag antar att detta är en skoluppgift och om jag var lärare och någon löste detta med jQuery så skulle jag underkänt eleven med 10 rapp på fingrarna med linjal. Bara som tillägg om det är en övningsuppgift. Givetvis så fungerar detta.
Citera
2018-05-31, 14:11
  #5
Medlem
Citat:
Ursprungligen postat av kalkryggar
Jag antar att detta är en skoluppgift och om jag var lärare och någon löste detta med jQuery så skulle jag underkänt eleven med 10 rapp på fingrarna med linjal. Bara som tillägg om det är en övningsuppgift. Givetvis så fungerar detta.

Om det är en skoluppgift så vill man inte lösa det åt OP, men tänkte om det var för o lära sig i eget etc så är det en lösning.
Citera
2018-06-01, 10:21
  #6
Medlem
det är en skoluppgift.. så jquerry är nog inte något jag ska använda mig utav.. ville mest ha en guidning å hjälp att förstå hur det ska gå till..
Citera
2018-08-28, 14:25
  #7
Medlem
ingen som kan hjälpa lite?
Citera
2018-08-28, 14:38
  #8
Medlem
Citat:
Ursprungligen postat av mssoulstar
ingen som kan hjälpa lite?

Enkel ren javascriptlösning som bygger på din kod:

Kod:
<head>
  <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>
Citera

Stöd Flashback

Flashback finansieras genom donationer från våra medlemmar och besökare. Det är med hjälp av dig vi kan fortsätta erbjuda en fri samhällsdebatt. Tack för ditt stöd!

Stöd Flashback