To reduce the number of lines of code I simplified my code to display three divs instead. What I want is to have a particular div displayed while hiding the other two divs depending on which radio button is checked.
I'm actually following these two links
Adding event listeners to multiple elements
How can I check whether a radio button is selected with JavaScript?
in the second link it was suggested to use
radios[i].type === 'radio' && radios[i].checked
for the test.
however I modified it to just
DisplayOption[i].checked
since its all I think i need. The error I'm receiving is
Uncaught TypeError: Cannot read property 'checked' of undefined
const column = document.querySelector('.column');
const table = document.querySelector('.table');
const details = document.querySelector('.details');
onload = function() {
const DisplayOption = document.getElementsByClassName("DisplayOption");
for (i = 0; i < DisplayOption.length; i++) {
DisplayOption[i].addEventListener('click', function() {
if (DisplayOption[i].checked) {
if (displyOption[i].value === "column") {
column.style.display = "grid";
table.style.display = "none";
table.details.style.display = "none";
} else if (displyOption[i].value === "table") {
column.style.display = "none";
table.style.display = "block";
table.details.style.display = "none";
} else {
column.style.display = "none";
table.style.display = "none";
table.details.style.display = "block";
}
}
}, false);
}
}
.column {
display: grid;
}
.table {
display: none;
}
.table.details {
display: none;
}
<input type="radio" name="DisplayOption" value="column" class="DisplayOption" checked>
<input type="radio" name="DisplayOption" value="table" class="DisplayOption">
<input type="radio" name="DisplayOption" value="details" class="DisplayOption">
<div class="column"> The first div is being displayed </div>
<div class="table"> The second div is being displayed</div>
<div class="table details"> The third div is being displayed </div>
Inside the eventListener, to refer to the element being clicked use this instead of DisplayOption[i]. Another bug was using table.details - it should be only details. See corrected demo below:
const column = document.querySelector('.column');
const table = document.querySelector('.table');
const details = document.querySelector('.details');
onload = function() {
const DisplayOption = document.getElementsByClassName("DisplayOption");
for (i = 0; i < DisplayOption.length; i++) {
DisplayOption[i].addEventListener('click', function() {
if (this.checked) {
if (this.value === "column") {
column.style.display = "grid";
table.style.display = "none";
details.style.display = "none";
} else if (this.value === "table") {
column.style.display = "none";
table.style.display = "block";
details.style.display = "none";
} else {
column.style.display = "none";
table.style.display = "none";
details.style.display = "block";
}
}
}, false);
}
}
.column {
display: grid;
}
.table {
display: none;
}
.table.details {
display: none;
}
<input type="radio" name="DisplayOption" value="column" class="DisplayOption" checked>
<input type="radio" name="DisplayOption" value="table" class="DisplayOption">
<input type="radio" name="DisplayOption" value="details" class="DisplayOption">
<div class="column"> The first div is being displayed </div>
<div class="table"> The second div is being displayed</div>
<div class="table details"> The third div is being displayed </div>
You could achieve the same using CSS ! No need of javascript !
You can make use of the sibling (~) selector in CSS and display the corresponding div
div {
display: none;
}
input[value="column"]:checked~.column,
input[value="table"]:checked~.table,
input[value="details"]:checked~.details {
display: block;
}
<input type="radio" name="DisplayOption" value="column" class="DisplayOption" checked>
<input type="radio" name="DisplayOption" value="table" class="DisplayOption">
<input type="radio" name="DisplayOption" value="details" class="DisplayOption">
<div class="column"> The first div is being displayed </div>
<div class="table"> The second div is being displayed</div>
<div class="details"> The third div is being displayed </div>
JSFiddle link
Related
If the user checks the checkbox:
<input type="checkbox" value="Door"
I want to show a picture with the picture_door id. Once unchecked, I need to hide it.
I can only use HTML, CSS and JavaScript.
function myFunction() {
var checkBox = document.getElementByValue("Door");
var img = document.getElementById("picture_door");
if (checkBox.checked == true){
img.style.display = "block";
} else {
img.style.display = "none";
}
}
<div>
<input type="checkbox" value="Door" onclick="myFunction()">
</div>
You can do something like:
let img = document.getElementById("picture_door");
let door = document.getElementById("door");
img.src = "";
function myFunction(){
if(door.checked){
img.src = "https://i.ibb.co/mHscrNh/cat.webp";
} else{
img.src = "";
}
}
<div>
<input type="checkbox" value="Door" id="door" onclick="myFunction()">
</div>
<br>
<img src="" id="picture_door" width="120px"/>
Instead of using CSS, you can also unset the src attribute of img using JavaScript to hide the image.
There is no selector called getByElementValue. You should use getElementById
function myFunction() {
var checkBox = document.getElementById("Door");
var label = document.getElementById("label");
var img = document.getElementById("picture_door");
if (!checkBox.checked){
img.style.display = "block";
label.innerText = "Show"
} else {
img.style.display = "none";
label.innerText = "Close"
}
}
<input type="checkbox" id="Door" onclick="myFunction()" >
<label for="Door" id="label"> Toogle </label>
<img id="picture_door" src="https://images.pexels.com/photos/9604813/pexels-photo-9604813.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1">
i want to have multiple elements with same class that act independently, after 1 night of seeking if "forEach" has any 'forEach:active' i end up with code below, but i feel kind of little shame with 'nextSibling of parent of parent' but if is supported by atleast any modern browsers, then is better than nothing.
on codePen is working fine,as well as snippet here.
i wonder if i can find a better version in vanila js for it or if is there anything deprecated that i should change.
//get + button
const up = document.querySelectorAll('.up');
//tell to + to increase his previous frend value
[].forEach.call(up, function(element) {
element.addEventListener('click', function() {
this.previousElementSibling.value =
parseInt(this.previousElementSibling.value) + 1;
});
})
//get -
const down = document.querySelectorAll('.down');
//tell to - to decrease his next frend value && and hide
//dynamic
//input if == 0 && show firstAdd button
[].forEach.call(down, function(element) {
element.addEventListener('click', function() {
this.nextElementSibling.value =
parseInt(this.nextElementSibling.value) - 1;
if (this.nextElementSibling.value == 0) {
this.parentElement.parentElement.style.display = 'none';
this.parentElement.parentElement.nextElementSibling.style.display = 'initial';
}
});
})
//get firstAdd button
const fAdd = document.querySelectorAll('.firstAdd');
//tell to it to add dynamic input && to vanish itself after &&
//set input value = 1
[].forEach.call(fAdd, function(element) {
element.addEventListener('click', function() {
this.previousElementSibling.style.display = 'initial';
this.previousElementSibling.children[1].children[1].value = 1;
this.style.display = 'none'
});
})
.form-group {
width: 30%;
margin: 30px;
display: none;
}
.input-group {
flex-direction: row;
display: flex;
}
body {
background: #111;
}
<div class='one'>
<div class="form-group">
<label>value: </label>
<div class="input-group">
<button class="down">-</button>
<input type="text" class="myNumber" value='1'>
<button class="up">+</button>
</div>
</div>
<button class='firstAdd'>Add</button></div>
<br>
<div class='two'>
<div class="form-group">
<label>value: </label>
<div class="input-group">
<button class="down">-</button>
<input type="text" class="myNumber" value='1'>
<button class="up">+</button>
</div>
</div>
<button class='firstAdd'>Add</button></div>
I'm trying to make the checkbox behave with the Enter key (when tabbed into) the same way it usually does with the space bar or when clicked. I cooked up a case where the checkbox is indeed being checked, but it then doesn't act like it should, i.e. I want it to display a previously hidden text and disappear itself. How can I achieve this? Adding something like document.getElementById("myCheck").click() doesn't work, though.
document.addEventListener('keydown', (e) => {
if( e.key === "Enter" && e.target.classList.contains('myCheck')){
e.target.checked = !e.target.checked;
}
})
function myFunction() {
var form = document.getElementById("form");
var checkBox = document.getElementById("myCheck");
var text = document.getElementById("text");
if (checkBox.checked === true){
form.style.display = "none";
text.style.display = "block";
} else {
form.style.display = "inline-block";
text.style.display = "none";
}
}
* {
margin: 10px;
padding: 0;
font-size: 50px;
}
input {
width: 30px;
height: 30px;
}
p {
color: red;
text-transform: uppercase;
}
<form class="form" id="form" style="display:inline-block">
<input type="checkbox" class="myCheck" id="myCheck" onclick="myFunction()">
<label for="myCheck">Checkbox</label>
</form>
<p id="text" style="display: none;">checkbox is checked</p>
All you need to do is trigger the click event, that will check the box. If you manually set checked and then trigger click it will undo the manual setting.
document.addEventListener('keydown', (e) => {
if( e.key === "Enter" && e.target.classList.contains('myCheck')){
//e.target.checked = !e.target.checked;
e.target.click()
}
})
function myFunction() {
var form = document.getElementById("form");
var checkBox = document.getElementById("myCheck");
var text = document.getElementById("text");
if (checkBox.checked === true){
form.style.display = "none";
text.style.display = "block";
} else {
form.style.display = "inline-block";
text.style.display = "none";
}
}
* {
margin: 10px;
padding: 0;
font-size: 50px;
}
input {
width: 30px;
height: 30px;
}
p {
color: red;
text-transform: uppercase;
}
<form class="form" id="form" style="display:inline-block">
<input type="checkbox" class="myCheck" id="myCheck" onclick="myFunction()">
<label for="myCheck">Checkbox</label>
</form>
<p id="text" style="display: none;">checkbox is checked</p>
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>
I am trying to get a message to pop up when a user selects 2 bootstrap toggle checkboxes. I have this set up so far:
My html:
<div>
<p id="enable-msg"><span class="glyphicon glyphicon-thumbs-up"></span></p>
<p id="disable-msg"><span class="glyphicon glyphicon-thumbs-down"></span></p>
<label for="cure">
<input type="checkbox" id="Checkbox1" onclick="showHide();" onchange="ToggleSwitchMessage('Checkbox1', 'enable-msg', 'disable-msg')" >
Criteria 1</label>
</div>
<div>
<p id="enable-msg2"><span class="glyphicon glyphicon-thumbs-up"></span></p>
<p id="disable-msg2"><span class="glyphicon glyphicon-thumbs-down"></span></p>
<input type="checkbox" id="Checkbox2" onchange="ToggleSwitchMessage('Checkbox2', 'enable-msg2', 'disable-msg2')" unchecked/>
<label for="shortTerm" class="control-label">Criteria 2</label>
<br>
<label class="curemsg green" id="Text1"> Message </label>
</div>
My javascipt:
$('input[type="checkbox"]').click(function () {
$('.curemsg').hide();
if ($('#Checkbox1').is(':checked') && $('#Checkbox2').is(':checked')) $('.curemsg').show();
});
$(document).ready(function() {
$("input#Checkbox1").bootstrapSwitch({});
ToggleSwitchMessage('Checkbox1', 'enable-msg', 'disable-msg')
});
$(document).ready(function() {
$("input#Checkbox2").bootstrapSwitch({});
ToggleSwitchMessage('Checkbox2', 'enable-msg2', 'disable-msg2')
});
function ToggleSwitchMessage(checkId, firstCommentId, secondCommentId) {
var check_box = document.getElementById(checkId)
var first_alert = document.getElementById(firstCommentId);
var second_alert = document.getElementById(secondCommentId);
if (check_box.checked == true) {
first_alert.style.visibility = "visible";
first_alert.style.display = "inline-block";
second_alert.style.visibility = "hidden";
second_alert.style.display = "none";
} else {
first_alert.style.visibility = "hidden";
first_alert.style.display = "none";
second_alert.style.visibility = "visible";
second_alert.style.display = "inline-block";
}
}
My CSS:
#enable-msg,
#enable-msg2 {
display: inline;
color: green;
}
#disable-msg,
#disable-msg2 {
display: inline;
color: red;
}
.curemsg {
display: none;
}
.green {
background: #00ff00;
}
Here is my Jsfiddle
Ultimately I will have about 10 toggleswitches but I want to be able to display a message when 2 specific toggleswitches/checkboxes have been selected.
Thank you