Javascript rectangles that move

Question

1.00/5 (1 vote)

See more:

the code here moves the rectangle towards right which is good

When the rectangle reaches somewhere 140 the other rectangle should go towards 40

<!DOCTYPE html>
<html>
<style>
#myContainer {
  width: 400px;
  height: 400px;
  position: relative;
  background: yellow;
}
#thatFilm {
  width: 40px;
  height: 40px;
  position: absolute;
  background-color: red;
}
#oytu {
  width: 40px;
  height: 40px;
  position: relative;
  top:140px;
  background-color: orange;
}
</style>
<body>

<script>
function wowThat() 
{
  var elem = document.getElementById("thatFilm");   
  var pos = 0;
  var id = setInterval(frame, 10);
  
  function frame() 
  {
    if (pos == 350) 
    {
      clearInterval(id);
    } 
    else 
    {
      pos++; 
      //elem.style.top = pos + 'px'; 
      elem.style.left = pos + 'px'; 
    }
    function that()
 	{
  		var oydu = document.getElementById("oytu");  
  		if (elem.style.left = 140) 
    {
      oydu.style.left = 40 ;
    }  
  }  	
  } 
}
</script>    
    
<p>
<button onclick="wowThat()">Click Me</button> 
</p>

<div id ="myContainer">
<div id ="thatFilm"></div>
<div id ="oytu"></div>
</div>

What I have tried:

javascript code research and various articles

Posted 15-Sep-21 2:51am

four systems

Updated 15-Sep-21 8:22am

RedDk

v5

Add a Solution

2 solutions

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard MacCutchan · Answer 1 · 2021-09-15T03:24:00

The function named that is never called. Change function frame to

JavaScript

<!DOCTYPE html>
<html>
<style>
#myContainer {
  width: 400px;
  height: 400px;
  position: relative;
  background: yellow;
}
#thatFilm {
  width: 40px;
  height: 40px;
  position: absolute;
  background-color: red;
}
#oytu {
  width: 40px;
  height: 40px;
  position: relative;
  top:140px;
  background-color: orange;
}
</style>
<body>

<script>
function wowThat() 
{
  var elem = document.getElementById("thatFilm");   
  var oydu = document.getElementById("oytu");
  var epos = 0;
  var opos = 0;
  var id = setInterval(frame, 10);
  
  function frame() 
  {
    if (epos == 350) 
    {
      clearInterval(id);
    } 
    else 
    {
      epos++; 
      //elem.style.top = pos + 'px'; 
      elem.style.left = epos + 'px';
      opos++;
      if (opos == 140) {
        opos = 40;
      }
      oydu.style.left = opos + 'px';
    }
  }
  
  function that()
  {
  var oydu = document.getElementById("oytu");  
  if (elem.style.left = 140) 
    {
      oydu.style.left = 40;
    }  
  }
}
</script>    
    
<p>
<button onclick="wowThat()">Click Me</button> 
</p>

<div id ="myContainer">
<div id ="thatFilm"></div>
<div id ="oytu"></div>
</div>

</body>
</html>

Brayden Slate · Answer 2 · 2021-09-15T08:15:00

<!DOCTYPE html>
<html>
<style>
#myContainer {
  width: 400px;
  height: 400px;
  position: relative;
  background: yellow;
}
#thatFilm {
  width: 40px;
  height: 40px;
  position: absolute;
  background-color: red;
}
#oytu {
  width: 40px;
  height: 40px;
  position: relative;
  top:140px;
  background-color: orange;
}
</style>
<body>

<script>
function wowThat() 
{
  var elem = document.getElementById("thatFilm");   
  var oydu = document.getElementById("oytu");
  var epos = 0;
  var opos = 0;
  var id = setInterval(frame, 10);
  
  function frame() 
  {
    if (epos == 350) 
    {
      clearInterval(id);
    } 
    else 
    {
      epos++; 
      //elem.style.top = pos + 'px'; 
      elem.style.left = epos + 'px';
      opos++;
      if (opos == 140) {
        opos = 40;
      }
      oydu.style.left = opos + 'px';
    }
  }
  
  function that()
  {
  var oydu = document.getElementById("oytu");  
  if (elem.style.left = 140) 
    {
      oydu.style.left = 40;
    }  
  }
}
</script>    
    
<p>
<button onclick="wowThat()">Click Me</button> 
</p>

<div id ="myContainer">
<div id ="thatFilm"></div>
<div id ="oytu"></div>
</div>

</body>
</html>

Javascript rectangles that move

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

Javascript rectangles that move

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

Existing Members

...or Join us