Jump to content
Sign in to follow this  
Balderick

activate 2 html elements with 1 onChange event

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?

 

 

 

 

 

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...