I have a drop down menu that displays different divs based on the selected option.
<select id='building-type'>
<option disabled selected value> -- select an option -- </option>
<option id="residential" value="residential" [...]>Residential</option>
<option id="commercial" value="commercial " [...]>Commercial</option>
<option id="corporate" value="corporate" [...]>Corporate</option>
<option id="hybrid" value="hybrid" [...]>Hybrid</option>
</select>
In those divs I call my function elevatorCalc() like so.
<div class="col-md-4" id="number-of-apartments">
<label for="residential_apartments">Number of apartments *</label>
<input onchange="elevatorCalc()" required type="number" class="form-control" id="resinput_number-of-apartments">
</div>
The function elevatorCalc() worked with radio buttons but when I switched it to a dropdown it stopped working.
this is my function
function elevatorCalc() {
const floors = document.getElementById("resinput_number-of-floors");
if (document.getElementById("commercial").checked == true) {
commercial();
} else if (document.getElementById("residential").checked == true && parseInt(floors.value) <= 20) {
residential();
} else if (document.getElementById("residential").checked == true && parseInt(floors.value) > 20) {
residential20();
} else if (document.getElementById("corporate").checked == true) {
corpo();
} else if (document.getElementById("hybrid").checked == true) {
hybrid();
}
}
My guess was that the problem came from .checked but I really don't know.
You should get the selected value like this:
let value = document.getElementById('building-type').value;
for the logic:
switch(value) {
case 'residential':
residential();
break;
case 'corporate':
corpo();
...
Related
change = function(event) {
let new_url;
if (event.target.value == "views") {
new_url = "images/desert.jpg";
} else if (event.target.value == "beaches") {
new_url = "images/beach-calm.jpg";
} else if (event.target.value == "party") {
new_url = "images/plane-wing.jpg";
}
let image_two = document.getElementById("image-two");
if (new_url && image_two.src.indexOf("images/second-main-image.png") != -1) {
image_two.src = new_url;
}
}
<select id="select-one" class="suggestion-dropbox" name="likes" onchange="change(event)">
<option id="default" value="default"> </option>
<option id="views" value="views">stunning views</option>
<option id="beaches" value="beaches">glorious white beaches</option>
<option id="party" value="party">places to party</option>
</select>
I have a dropdown menu and when a different option is clicked I want an image on the page to change with it. I have managed to make it do this however only does it once and stops after that. I've added the code so far below.
Do I need to make it a while loop and if so how would I structure it? Thanks for any help
Your second function definition is replacing the first one, so you only update the image when you select beaches.
You need one function that checks for both options.
It only works one time because you only change the image when it contains images/second-main-image.png. After you've selected something from the menu, that's no longer true. You should remove that check.
And if you want to go back to the default when the user selects the default option, add a case for that.
change = function(event) {
let new_url;
if (event.target.value == "views") {
new_url = "images/desert.jpg";
} else if (event.target.value == "beaches") {
new_url = "images/beach-calm.jpg";
} else {
new_url = ("images/second-main-image.png");
}
let image_two = document.getElementById("image-two");
image_two.src = new_url;
}
<select id="select-one" class="suggestion-dropbox" name="likes" onchange="change(event)">
<option id="default" value="default"> </option>
<option id="views" value="views">stunning views</option>
<option id="beaches" value="beaches">glorious white beaches</option>
<option id="party" value="party">places to party</option>
</select>
<img id="image-two" src="images/second-main-image.png">
New to HTML and JavaScript and I am attempting to make a webpage which let the user choose which gate they would like to use e.g.
AND
OR
XOR
NAND
NOR
The user enters their choice through a dropdown box then they choose the values to enter either 1 or 0.
This is all I have for the function right now, I was using the console.log to test if it was receiving the choice properly which it does, but I don't know how to move forwards from here and how to run the logic gates.
function Logic() {
console.log("Invoked Logic")
if (document.getElementById('gate').value == "1")
console.log("1")
else if (document.getElementById('gate').value == "2") {
console.log("2")
}
else if(document.getElementById('gate').value == "3") {
console.log("3")
}
else if (document.getElementById('gate').value == "4") {
console.log("4")
}
else if (document.getElementById('gate').value == "5") {
console.log("5")
}
else {
alert("Not a valid option.");
}
}
<label>Which Logic Gate would you like?</label> <select id="gate">
<option value ="d"> Please Select</option>
<option value="1" >AND</option>
<option value ="2">OR</option>
<option value="3">XOR</option>
<option value ="4">NAND</option>
<option value="5">NOR</option>
</select> <br> <br>
<label>What value would you like the second input to be?</label> <select id="v2">
<option value ="d"> Please Select</option>
<option value="b1">0</option>
<option value ="b2">1</option>
</select>
and for the value of 1 or 0 I use another drop down (two of them).
How would I go about getting the value of the two dropdowns then inputting them into the corresponding logic gates?
edit seems as though all of my if statements are pushing this error onto me.
Unexpected type coercion
I was able to fix it by using triple equals.
That isn't the main problem, my problem is that I do not understand how I can convert my two dropdown values which are strings into booleans themself and then run that into a logic gate equation.
An example of this if the user chose the "AND" gate and a 1 and 0. The 1 and 0 are converted into booleans so 1 being true and 0 being false and then outputting the result of them being ran through a logic gate so 0.
Attached the logic function to the change event of the select boxes. Checked if they all had a valid value. If so calculate the result based on the used gate.
/*
document.getElementById('gate').addEventListener('change', logic);
document.getElementById('v1').addEventListener('change', logic);
document.getElementById('v2').addEventListener('change', logic);
*/
document.getElementById('buttonId').addEventListener('click', logic);
function logic() {
var elGate = document.getElementById('gate');
var elV1 = document.getElementById('v1');
var elV2 = document.getElementById('v2');
var gateValue = elGate.value !== 'd' ? parseInt(elGate.value) : undefined;
var v1Value = elV1.value === 'b1' ? false : elV1.value === 'b2' ? true : undefined;
var v2Value = elV2.value === 'b1' ? false : elV2.value === 'b2' ? true : undefined;
var result = 'Invalid result';
if (v1Value !== undefined && v2Value !== undefined && gateValue !== undefined && gateValue > 0 && gateValue < 6) {
switch (gateValue) {
case 1:
result = (v1Value && v2Value) ? 'true' : 'false';
break;
case 2:
result = (v1Value || v2Value) ? 'true' : 'false';
break;
case 3:
result = ((v1Value && !v2Value) || (!v1Value && v2Value)) ? 'true' : 'false';
break;
case 4:
result = (!(v1Value && v2Value)) ? 'true' : 'false';
break;
case 5:
result = (!(v1Value || v2Value)) ? 'true' : 'false';
break;
default:
break;
}
}
document.getElementById('result').value = result;
}
<select id="gate">
<option value="d"> Please Select</option>
<option value="1">AND</option>
<option value="2">OR</option>
<option value="3">XOR</option>
<option value="4">NAND</option>
<option value="5">NOR</option>
</select>
<select id="v1">
<option value="d"> Please Select</option>
<option value="b1">0</option>
<option value="b2">1</option>
</select>
<select id="v2">
<option value="d"> Please Select</option>
<option value="b1">0</option>
<option value="b2">1</option>
</select>
<input id="result">
<button id="buttonId">Run Logic</button>
I want the page to auto-select some value ('hot', 'new', etc.) depending on the
$r->category value which is loaded from database. The $r->category value contains some string that could be 'hot', 'new', etc.
Input element:
<input type="text" id="cex" value="<?php echo $r->category?>">
The select option:
<select name="ktgr" onChange="cek();">
<option id='n' value="normal">normal</option>
<option id='h' value="hot">hot</option>
<option id='nw' value="new">new</option>
<option id='u' value="upcoming">upcoming</option>
</select>
The javascript function
function cek()
{
var j = document.getElementById("cex").value;
if(j=='normal')
document.getElementById('n').selected=true;
else if(j=='hot')
document.getElementById('h').selected=true;
else if(j=='new')
document.getElementById('nw').selected=true;
else if(j=='upcomming')
document.getElementById('u').selected=true;
}
Currently, your code will set the value of the select element to the initial value every time any option is selected. For example, if 'hot' is the value from the server, and a user selects 'new', the cek function will execute in the change event and change the value back to 'hot'.
Instead, only set the select element's value to the initial value from the server once. A working example is below.
function cek() {
var j = document.getElementById("cex").value;
if (j == 'normal')
document.getElementById('n').selected = true;
else if (j == 'hot')
document.getElementById('h').selected = true;
else if (j == 'new')
document.getElementById('nw').selected = true;
else if (j == 'upcoming')
document.getElementById('u').selected = true;
}
<body onload="cek()">
<input id="cex" value="new" />
<select name="ktgr">
<option id='n' value="normal">normal</option>
<option id='h' value="hot">hot</option>
<option id='nw' value="new">new</option>
<option id='u' value="upcoming">upcoming</option>
</select>
</body>
I have used this multiselect checkbox with a combobox option..
JsFiddle
In my jsfiddle that checkbox with a combobox type will not work. I have too many codes. So, I didn't included. See this link for full codes I'm trying to show and hide the div content depending upon selected checkbox. it does not work. I tried this code separately (without a combobox checkbox only). it works. I have problem with checkbox with a combobox type. How do I show/hide div content based upon selected checkbox with combobox option?
Without Combobox Fiddle
Javascript
document.getElementById("option_1").onclick = function() {
if(this.checked)
document.getElementById('choose_the_correct_answer').style.display = "block";
else
document.getElementById('choose_the_correct_answer').style.display = "none";
}
I have tried this Jquery code too
$(document).ready(function(){
$('#option_1').on('change', function() {
if ( this.value == '1')
{
$("#choose_the_correct_answer").show();
}
else
{
$("#choose_the_correct_answer").hide();
}
});
});
HTML
<select id="control_3" name="control_3[]" multiple="multiple" size="5">
<option value=""></option>
<option id="option_1" value="option_1">Choose the Correct Answer</option>
<option id="option_2" value="option_2">Fill in the Blanks</option>
<option id="option_3" value="option_3">True or False</option>
<option id="option_4" value="option_4">Match the Following</option>
<option id="option_5" value="option_5">Two Mark Questions</option>
<option id="option_6" value="option_6">Five Mark Questions</option>
<option id="option_7" value="option_7">Others</option>
</select>
<div id="choose_the_correct_answer">choose the correct answer</div>
<div id="fill_in_the_blanks">fill in the blanks</div>
<div id="true_or_false">true or false</div>
<div id="match_the_following">match the following</div>
<div id="two_mark_questions">two mark questions</div>
<div id="five_mark_qustions">five mark questions</div>
<div id="others">others</div>
try
$('#option_1').on('click', function() {
});
and
the condition should be
if ( this.value == 'option_1')
JSFIDDLE
$(document).ready(function(){
$('#option_1').on('click', function() {
if ( this.value == 'option_1')
{
$("#choose_the_correct_answer").show();
}
else
{
$("#choose_the_correct_answer").hide();
}
});
});
UPDATE:
AND a better option will be to use .togggle() if you intend to use multiselect
UPDATED DEMO
JS:
$(document).ready(function(){
$('option').on('click', function() {
if ( this.value == 'option_1')
{
$("#choose_the_correct_answer").toggle();
}
else if ( this.value == 'option_2')
{
$("#fill_in_the_blanks").toggle();
}
else if ( this.value == 'option_3')
{
$("#true_or_false").toggle();
}
else if ( this.value == 'option_4')
{
$("#match_the_following").toggle();
}
else if ( this.value == 'option_5')
{
$("#two_mark_questions").toggle();
}
else if ( this.value == 'option_6')
{
$("#five_mark_qustions").toggle();
}
else if ( this.value == 'option_7')
{
$("#others").toggle();
}
});
});
New Update: using normal dropdown with multiselect
use
$('select').on('change', function() {
FIDDLE
I have a dropdown on change a popup appears with a warning that change the value will do some affects. when user select no the dropdown selected index is supposed to return to initial selected option. here is what I do:
function closeDeleteVariantsPopup(){
parent.$.fn.colorbox.close();
var elementSpecies= parent.document.getElementsByClassName("speice");
for(var i = 0;i<elementSpecies[0].options.length; ++i) {
alert(parent.document.getElementById("speciesHiddenValue").value);
if(elementSpecies[0].options[i].id === parent.document.getElementById("speciesHiddenValue").value) {
alert(parent.document.getElementById("speciesHiddenValue").value);
elementSpecies[0].selectedIndex = i;
break;
}
}
}
html & freemarker:
[#spring.bind "genomicReferenceBean.specie.id"/]
<select name="specie.id" id="specie.id" [#if !(genomicReferenceBean.specie?has_content) || genomicReferenceBean.specie.id==-1] multiple="multiple" [/#if] class='speice singleList' onchange='getMaterials()' >
[#if genomicReferenceInitializerBean.species?has_content]
[#list genomicReferenceInitializerBean.species as initializerValueBean]
<option for="selectSpecie" name="${initializerValueBean.name}" [#if genomicReferenceBean.specie?has_content && genomicReferenceBean.specie.id?number == initializerValueBean.id] selected="selected" [/#if] value="${initializerValueBean.id}">${initializerValueBean.name}</option>
[/#list]
[/#if]
</select>
<input type="hidden" id="speciesHiddenValue" value="${genomicReferenceBean.specie.id?number}"/>
now when I press no button the popup close and nothing happen
I used jQuery and it worked fine:
parent.$(".speice option").each(function(){
if($(this).val() === parent.document.getElementById("speciesHiddenValue").value) {
$(this).attr('selected', 'selected');
}
});