Multiple JavaScript OnClick events with multiple values in one target

Multiple JavaScript OnClick events with multiple values in one target - javascript

I have added a JavaScript onclick attribute to an HTML DIV tag.
I am using multiple onclick attributes in a single DIV tag. Each onclick contains various tags.
What I want is when I click one onclick tag it should display its very own tag in the DIV tag.
And when I click another onclick tag it should display its tag in the same tag but it should clear the previous value.
HTML:
<div id="mobi" style="display:none;" class="answer_list" > mobile</div>
<div id="elec" style="display:none;" class="answer_list" > electric</div>
<div id="vehi" style="display:none;" class="answer_list" > vehicles</div>
<div id="home" style="display:none;" class="answer_list" > home</div>
<div id="pets" style="display:none;" class="answer_list" > pets</div>
<div id="book" style="display:none;" class="answer_list" > book</div>
<div id="main">
<p name="answer" value="Show Div" onclick="mob()" >Mobile</p>
<p name="answer" value="Show Div" onclick="ele()" >Electronics</p>
<p name="answer" value="Show Div" onclick="veh()" >Vehicle</p>
<p name="answer" value="Show Div" onclick="hme()" >Home & Furniture</p>
<p name="answer" value="Show Div" onclick="pet()" >Pets</p>
<p name="answer" value="Show Div" onclick="boo()" >Books CD & Hobbies</p>
</div>
JavaScript:
function mob() {
document.getElementById('mobi').style.display = "block";
}
function ele() {
document.getElementById('elec').style.display = "block";
}
function veh() {
document.getElementById('vehi').style.display = "block";
}
function hme() {
document.getElementById('home').style.display = "block";
}
function pet() {
document.getElementById('pets').style.display = "block";
}
function boo() {
document.getElementById('book').style.display = "block";
}

function mob() {
first();
document.getElementById('mobi').style.display = "block";
}
function ele() {
first();
document.getElementById('elec').style.display = "block";
}
function veh() {
first();
document.getElementById('vehi').style.display = "block";
}
function hme() {
first();
document.getElementById('home').style.display = "block";
}
function pet() {
first();
document.getElementById('pets').style.display = "block";
}
function boo() {
first();
document.getElementById('book').style.display = "block";
}
function first(){
document.getElementById('mobi').style.display = "none";
document.getElementById('elec').style.display = "none";
document.getElementById('vehi').style.display = "none";
document.getElementById('home').style.display = "none";
document.getElementById('pets').style.display = "none";
document.getElementById('book').style.display = "none";
}

Related

Javascript Checkbox Display Error

I am using javascript to check if a checkbox is ticked or not. There are 3 checkboxes and only one can be selected at a time. I am using the following code which works fine, when I uncheck a box and check another the div displays correctly but if I select one then select another e.g have selected checkbox1 and select checkbox2 the "testing" div still appears and the "video" div does not appear. I am guessing this is just something really simple but I can't work it out
HTML
<div class="row">
<div class="col-25">
<label for="lname">Type</label>
</div>
<div class="col-75" style="font-size:17px; padding-top:1%;">
<div id="margin" style="margin-right:4%">Image: <input type="checkbox" id="myCheck1" class="check" onclick="myFunction()" name="image"></div><div id="margin" style="margin-right:4%">Video: <input type="checkbox" id="myCheck2" class="check" onclick="myFunction()" name="video"></div><div id="margin" style="margin-right:4%">HTML<a style="color:red">(not currently in use)</a>: <input type="checkbox" id="myCheck3" class="check" onclick="myFunction()" name="html"></div>
</div>
</div>
Javascript
<script>
function checkFunction() {
var checkBox = document.getElementById("myCheck1");
var text = document.getElementById("testing");
var checkBox2 = document.getElementById("myCheck2");
var text2 = document.getElementById("video");
var checkBox3 = document.getElementById("myCheck3");
var text3 = document.getElementById("html");
if (checkBox.checked == true){
text.style.display = "block";
text2.style.display = "none";
text3.style.display = "none";
} else {
text.style.display = "none";
if (checkBox2.checked == true){
text2.style.display = "block";
text.style.display = "none";
text3.style.display = "none";
} else {
text2.style.display = "none";
if (checkBox3.checked == true){
text3.style.display = "block";
text2.style.display = "none";
text.style.display = "none";
} else {
text3.style.display = "none";
text.style.display = "none";
text2.style.display = "none";
}
}
}
}
</script>
</script>
<script type="text/javascript">
$('.check').on('change', function() {
$('.check').not(this).prop('checked', false)
});
</script>

as some people answered you, you should definitely try using some radio buttons instead of checkboxes avoiding completely the need for extra code controlling basic functionality

Check this Out
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"/>
<script>
$(document).ready(function(){
$('input.check').on('change', function() {
if($('input.check').is(':checked'))
{
$('input.check').not(this).prop('checked', false);
$('input.check').not(this).parent('div').css('display', 'none');
}
else{
$('input.check').parent('div').css('display', '')
}
})
})
</script>
<body>
<div class="row">
<div class="col-25">
<label for="lname">Type</label>
</div>
<div class="col-75" style="font-size:17px; padding-top:1%;">
<div id="margin" style="margin-right:4%">Image: <input type="checkbox" id="myCheck1" class="check" name="image"></div><div id="margin" style="margin-right:4%">Video: <input type="checkbox" id="myCheck2" class="check" name="video"></div><div id="margin" style="margin-right:4%">HTML<a style="color:red">(not currently in use)</a>: <input type="checkbox" id="myCheck3" class="check" name="html"></div>
</div>
</div>
</body>
</html>

Found an easy way to fix this, other examples sometimes did not work and you would have to click twice, this works perfect.
<script type="text/javascript">
$('.check').on('change', function() {
var text = document.getElementById("testing");
var text2 = document.getElementById("video");
$('.check').not(this).prop('checked', false)
var res = $(this).val();
console.log("res is: " + res);
if (res == '1') {
text.style.display = "block";
text2.style.display = "none";
}
else {
text.style.display = "none";
text2.style.display = "block";
}
});
</script>

Can you use getElementByID to display the content of multiple div wrappers

I am using getElementById to toggle the display of a block in html. The block I am toggling is wrapped in a div like so:
<div id="SunMotion">
<br>
<p>
Toggle the switch to run "24HourCycle.py"
</p>
<label class="switch">
<input id="check3" type="hidden">
<article>
<button class="program" id="check3" id="script1" onclick="check3()" data-fileName="24HourCycle.py">24 Hour Cycle</button>
</article>
</label>
</div>
This is activated using the button:
<button class="button button1" onclick="SunMotion()">
Motion of the Sun
</button>
The button calls the function in javascript which displays the div using its Id:
document.getElementById("SunMotion").style.display = 'none';
function SunMotion() {
var x = document.getElementById("SunMotion");
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
document.getElementById("SunMotion").checked = false;
}
}
This works fine until I try to do the same thing with a different block. with a new function specific to that button:
<button class="button button1" onclick="SunMotion()">
Motion of the Sun
</button>
<button class="button button1" onclick="Hologram()">
Hologram Shapes
</button>
<br>
<div id="Hologram">
<br>
<p>
Toggle the switch to run the Hologram program
</p>
<label class="switch">
<div class="grid-container">
<input id="check12" type="hidden">
<div class="grid-container">
<div class="item1"><button id="check12" id="grd" id="script1" onclick="check12()" data-fileName="red.py">Red</button></div>
<input id="check13" type="hidden">
</label>
</div>
<br>
<div id="SunMotion">
<p>
Toggle the switch to run "24HourCycle.py"
</p>
<label class="switch">
<input id="check3" type="hidden">
<article>
<button class="program" id="check3" id="script1" onclick="check3()" data-fileName="24HourCycle.py">24 Hour Cycle</button>
</article>
</label>
</div>
<br>
<script>
document.getElementById("Hologram").style.display = 'none';
function Hologram() {
var x = document.getElementById("Hologram");
if (x.style.display === 'none') {
x.style.display = 'inline';
} else {
x.style.display = 'none';
document.getElementById("Hologram").checked = false;
}
}
document.getElementById("SunMotion").style.display = 'none';
function SunMotion() {
var x = document.getElementById("SunMotion");
if (x.style.display === 'none') {
x.style.display = 'inline';
} else {
x.style.display = 'none';
document.getElementById("SunMotion").checked = false;
}
}
</script>

if you want use that function on another div, you need to use getElementByClass instead. you can check it Here
or, if you still want to use id, just send that id as parameter.
function SunMotion(id) {
var x = document.getElementById(id);
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
document.getElementById(id).checked = false;
}
}
and, to call that just paste an Id to that function.
<button class="button button1" onclick="SunMotion('SunMotion')">
Motion of the Sun
</button>
Sorry, Typo. you can check my recheck my answer. my Edit is :
onclick="SunMotion('SunMotion')"
Please noted that I changing " by ' in parameter.

Javascript show div does not work when I press button

I have this simple code, and i can't understand why it is not working.
<div>
<input type="button" class="button" value="Add A Site" onclick="Div();" />
</div>
<script type="text/javascript">
function Div() {
var E = document.getElementsByClassName('Form');
if (E.style.display == 'none') {
E.style.display = 'block';
this.value = "Close";
} else {
S.style.display = 'none';
this.value = "Add A Site";
}
}
</script>
<div class="Form" style="display:none;">
<h1>Example</h1>
</div>

user Form which you are trying to access is inside div.form so you have to access that like below....I tested this, its working. the content in Form is displaying
<input type="button" class="button" value="Add A Site" onclick="Div();" />
<script type="text/javascript">
function Div() {
var E= document.getElementsByClassName('Form')[0];
if (E.style.display=='none'){
E.style.display='block';
this.value="Close";
}else {
S.style.display='none';
this.value="Add A Site";
}
}
</script>
<div class="Form" style="display:none;">
<h1>Example</h1></div>

<script>
function Div() {
var E = document.getElementsByClassName('Form')[0];
if (E.style.display==='none') {
E.style.display='block';
this.value=Close;
} else {
E.style.display = 'none';
this.value = 'Add A Site';
}
}
</script>
<input type="button" class="button" value="Add A Site" onclick="Div()" />
<div class="Form" style="display:none;">
<h1>Example</h1>
</div>
This should work for you.

Hiding hidden inputs from radio button after clicking the next radio button

I have a confusion in my javascript code since I'm not familiar with js.I have three radio buttons with hidden inputs.Now, if i click radioBtn1, the hidden inputs will show up.What i want is if when i click the radioBtn2 or radioBtn3, the hidden inputs in radioBtn1 should be hidden again.So meaning to say when i click any radioBtn the second time around,the radioBtn that i've click first, its hidden inputs should be hidden again.
function Allowance(select){
if(select.value=='Allowance'){
document.getElementById('allowance').style.display = "block";
}else{
document.getElementById('allowance').style.display = "none";
}
}
function Tuition(select){
if(select.value=='Tuition Fee'){
document.getElementById('tuition_fee').style.display = "block";
} else{
document.getElementById('tuition_fee').style.display = "none";
}
}
function Supply(select){
if(select.value=='School Supply'){
document.getElementById('school_supply').style.display = "block";
} else{
document.getElementById('school_supply').style.display = "none";
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="radio" name="ship_need" value="Allowance" id="test" onchange="Allowance(this)"> Allowance<br>
<div id="allowance" style="display: none;">
<ul>
<li>Food Allowance</li>
<li>Transportation Allowance</li>
</ul>
<label class="control-label">Money:</label>
<input type="text">
</div>
<input type="radio" name="ship_need" value="Tuition Fee" id="test" onchange="Tuition(this)"> Tution<br>
<div id="tuition_fee" style="display: none;">
<ul>
<li>Tuition Fee</li>
</ul>
<label class="control-label">Money:</label>
<input type="text">
</div>
<input type="radio" name="ship_need" value="School Supply" id="test" onchange="Supply(this)"> School
<div id="school_supply" style="display: none;">
<ul>
<li>Books</li>
<li>Uniform</li>
</ul>
<label class="control-label">Money:</label>
<input type="text">
</div>

You can reduce your code by using jquery. Please have a look on the below code, it may help you.
$( document ).ready(function() {
$('.sub_list').css('display','none');
$('input[type=radio]').change(function() {
$('.sub_list').css('display','none');
$('#'+this.value).css('display','block');
console.log(this.value);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="radio" name="ship_need" value="allowance" id="test" > Allowance<br>
<div id="allowance" class="sub_list" >
<ul>
<li>Food Allowance</li>
<li>Transportation Allowance</li>
</ul>
<label class="control-label">Money:</label>
<input type="text">
</div>
<input type="radio" name="ship_need" value="tuition_fee" id="test2" > Tution<br>
<div id="tuition_fee" class="sub_list" >
<ul>
<li>Tuition Fee</li>
</ul>
<label class="control-label">Money:</label>
<input type="text">
</div>
<input type="radio" name="ship_need" value="school_supply" id="test3" > School
<div id="school_supply" class="sub_list" >
<ul>
<li>Books</li>
<li>Uniform</li>
</ul>
<label class="control-label">Money:</label>
<input type="text">
</div>

before showing an input close the others:
function Allowance(select){
if(select.value=='Allowance'){
document.getElementById('tuition_fee').style.display = "none";
document.getElementById('school_supply').style.display = "none";
document.getElementById('allowance').style.display = "block";
}else{
document.getElementById('allowance').style.display = "none";
}
}
function Tuition(select){
if(select.value=='Tuition Fee'){
document.getElementById('allowance').style.display = "none";
document.getElementById('school_supply').style.display = "none";
document.getElementById('tuition_fee').style.display = "block";
} else{
document.getElementById('tuition_fee').style.display = "none";
}
}
function Supply(select){
if(select.value=='School Supply'){
document.getElementById('allowance').style.display = "none";
document.getElementById('tuition_fee').style.display = "none";
document.getElementById('school_supply').style.display = "block";
} else{
document.getElementById('school_supply').style.display = "none";
}
}

Because your logic is partial, you are showing the fields, but not hiding other fields.
function Allowance(select){
if(select.value=="Allowance"){
document.getElementById('allowance').style.display = "block";
document.getElementById('tuition_fee').style.display = "none";
document.getElementById('school_supply').style.display = "none";
}
}
function Tuition(select){
if(select.value=='Tuition Fee'){
document.getElementById('allowance').style.display = "none";
document.getElementById('tuition_fee').style.display = "block";
document.getElementById('school_supply').style.display = "none";
}
}
function Supply(select){
if(select.value=='School Supply'){
document.getElementById('allowance').style.display = "none";
document.getElementById('tuition_fee').style.display = "block";
document.getElementById('school_supply').style.display = "block";
}
}
Fiddle here:
https://jsfiddle.net/vjb2dnpg/

Getting divs to close if another one opens with Javascript

Basically I have signup and signin and I they're both divs which appear and disappear on the click of a link but I wish for one to close if the other is clicked and then opened.
Example:
signin area is open and signup button is clicked. I wish for signin area to disappear and for the signup content to be revealed.
Current Code:
<script language="javascript">
function toggle() {
var ele = document.getElementById("signin");
var text = document.getElementById("signtext");
var ele2 = document.getElementById("signup");
var text2 = document.getElementById("signuptext");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "show";
ele2.style.display = "block";
text2.innerHTML = "hide";
}
else {
ele.style.display = "block";
text.innerHTML = "hide";
ele2.style.display = "block";
text2.innerHTML = "hide";
}
}
function toggle2() {
var ele2 = document.getElementById("signup");
var text2 = document.getElementById("signuptext");
var ele = document.getElementById("signin");
var text = document.getElementById("signtext");
if(ele2.style.display == "block") {
ele2.style.display = "none";
text2.innerHTML = "show";
ele.style.display = "block";
text.innerHTML = "hide";
}
else {
ele2.style.display = "block";
text2.innerHTML = "hide";
ele.style.display = "block";
text.innerHTML = "hide";
}
}
</script>
Html :
<div id="signin" style="display: none">
<form action="loginscript.php" method="post">
<p>Username:<input type="text" id="username"></p>
<p>Password:<input type="password" id="password"> <input type="submit" value="submit"></p>
</form>
</div>
<div id="signup" style="display: none">
<h1>peek-a-boo</h1>
</div>

Try this.There is no need of creating two different functions.Lesser the number of functions=Better the code + smarter is the coder!!!!
function toggle(id){
switch(id)
{
case 'signin':
document.getElementById('signin').style.display='block';
document.getElementById('signup').style.display='none';
break;
case 'signup':
document.getElementById('signup').style.display='block';
document.getElementById('signin').style.display='none';
break;
}
HTML
<div id="signin" onclick="toggle(this.id)"> SignIN</div>
<div id="signup" onclick="toggle(this.id)"> SignUp</div>

You can invoke a function on "onclick" event and hide the div using CSS:Visibility property
<a id="myLink" href="#" onclick="MyFunction();">link text</a>

Try this one:
function signUpIn(objId) {
document.getElementById('signin').style.display = 'none';
document.getElementById('signup').style.display = 'none';
document.getElementById(objId).style.display = 'block';
}
Your html changes:
<div id="signin" style="display: block">
</div>
<div id="signup" style="display: none">
</div>
Sign Up
Sign In
Check if it works for you.

Try to grab concept from this, may not be a perfect, but still contain some learning part -
Check this working Fiddle - http://jsfiddle.net/j7LDD/
Working Code -
HTML PART -
<form id="signup" method="get" style="display:none;">
<label>SignUp Name</label>
<input type="text" name="signupname" />
<input type="submit" name="signupsubmit" value="signup" />
</form>
<form id="signin" method="get" style="display:none;">
<label>SignIn Name</label>
<input type="text" name="signinname" />
<input type="submit" name="signinsubmit" value="signin" />
</form>
<button id="signupbutton" onclick="toggle(this.id);">SignUp</button>
<button id="signinbutton" onclick="toggle(this.id);">SignIn</button>
JS PART -
<script>
function toggle( val ) {
if( "signupbutton" == val ) {
document.getElementById("signup").style.display = 'block';
document.getElementById("signin").style.display = 'none';
}
else {
document.getElementById("signin").style.display = 'block';
document.getElementById("signup").style.display = 'none';
}
}
</script>

We Keep Coding

JavaScript is the programming language of the Web.

Multiple JavaScript OnClick events with multiple values in one target - javascript

Related

Javascript Checkbox Display Error

Can you use getElementByID to display the content of multiple div wrappers

Javascript show div does not work when I press button

Hiding hidden inputs from radio button after clicking the next radio button

Getting divs to close if another one opens with Javascript

Categories

Resources