Jump to content

activate 2 html elements with 1 onChange event


Balderick

Recommended Posts

	<html> 
	<head>  
	<script type="text/javascript">
	function CheckColors(val){
	 var element=document.getElementById('color-test');
	 if(val=='pick a color'||val=='others')
	   element.style.display='block';
	 else  
	   element.style.display='none';
	}

	</script> 
	</head>

	<body bgcolor='lime'>
	<div style="margin-left: 400px; margin-top:100px; width: 200px; height: 200px; border: solid blue 1px;  display: inline-block;
		float: left;">
	<p style=""> name </p>
	<p style=""> ball </p>
	<p style=""> color </p> 
	 
	 
	</div>

	<div style="margin-left: 50px; margin-top:100px; width: 200px; height: 200px; border: solid blue 1px;  display: inline-block;
		float: left;">
	<p><input type ="text" ></p>
	<p><input type ="text" ></p>
	  <select name="color" onchange='CheckColors(this.value);'> 
		<option>pick a color</option>  
		<option value="red">RED</option>
		<option value="blue">BLUE</option>
		<option value="others">others</option>
	  </select>
	<p><input type="text" name="color" id="color-test" style='display:none;'/></p>
	</div>

	</body>

	</html>

 

I created an example script of a situation I would like to solve.

There are 2 divs. The right div receives an extra input field when onChange detects an event. In the left div there should also be a new html element like <p>.

How can I program this with javascript?

 

 

 

 

 

Link to comment
Share on other sites

Create the element first, then in the same function, you can call getElementById() and change the second element as well.

function CheckColors(val){
  var element=document.getElementById('color-test');
  var element2 = document.getElementById("something else");
  if(val=='pick a color'||val=='others') {
  	element.style.display='block';
    element2.style.display = "block";
  } else {
  	element.style.display='none';
    element2.style.display = "none";
  }
}

 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...