Click here to Skip to main content
15,441,149 members
Please Sign up or sign in to vote.
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
Updated 15-Sep-21 8:22am
v5

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>
 
Share this answer
 
v2
Comments
four systems 15-Sep-21 12:17pm     CRLF
thanks but the question is that when one rectangle moves and reaches somewhere the other rectangle should move
Richard MacCutchan 15-Sep-21 12:35pm    
Your code never moves the other rectangle. Try my updated solution.
<!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>
 
Share this answer
 

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900