JavaScript localStorage returning 1?

JavaScript localStorage returning 1? - javascript

I've been trying to do this simple code, although when I read the documentation for the localStorage. Im not quite understanding why it is returning 1. The below code is just a part of the HTML file. So if we for example select the id of maxAdult value 6. It will return 1. Is there a problem with my original HTML and this should be working fine or am I missing something?
First HTML
<select id="maxAdult">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
<select id="maxChild">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
<script>
var store = document.getElementById("maxAdult");
var value = store.value;
localStorage.setItem("max", value);
</script>
Second HTML
<script>
var passen = localStorage.max;
document.write("<br><strong style='font-size: 16px'>Number of Passengers:
</strong><br>");
document.write(passen);
</script>
Output
Number of Passengers:
1

Like what #charlietfl has said in the comments, you have to actually have to listen to the change event in order to update the localStorage when the <select> element value is updated, i.e.:
var store = document.getElementById("maxAdult");
// Listen to onchange
store.addEventListener('change', function() {
localStorage.setItem("max", this.value);
});
This is because JS is not reactive in nature and the value of store does not automagically update its counterpart in localStorage.

There's nothing wrong with your localStorage, but you need to write an event handler for when the value changes. As it stands, your code is only run once when the page loads. Here's a simple example using addEventListener
<select id="maxAdult">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
<select id="maxChild">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
<script>
var store = document.getElementById("maxAdult");
store.addEventListener("change", function() {
console.log(this.value);
});
</script>

Related

The options do not change on the cell phone, only on the computer

I created a function in javascript, where it changes the number of options in the select according to the value that I selected in the previous select. This works normally on the computer, however when I use it on my phone and other people's, this function does not work
these are the selects:
<select class='opcoes' id="pecasDoJogo-1Auto" onchange="getValue('pecasDoJogo-1Auto')" onclick="changeQuantityOfOptions('pecasDoJogo-1Auto','pecasDoJogo-1TeleOp')">
<option value="0" >0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
<select class='opcoes' id="pecasDoJogo-1TeleOp" onchange="getValue('pecasDoJogo-1TeleOp')" onclick="changeQuantityOfOptions('pecasDoJogo-1TeleOp','pecasDoJogo-1Auto')">
<option value="0">0</option>
<option value="1" >1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
These are the functions I'm using:
function getValue(nameId){
return parseInt(document.getElementById(nameId).value)
}
function changeQuantityOfOptions(yourId,ReferenceId){
const quantidade = 9 - parseInt(document.getElementById(yourId).value)
const select = document.getElementById(ReferenceId)
select.innerHTML = ""
for(var i = 0; i <= quantidade; i++){
select.innerHTML += `<option value="${i}">${i}</option>`
}
}```

You should call your function only onchange, not onclick.
function getValue(nameId){
return parseInt(document.getElementById(nameId).value)
}
function changeQuantityOfOptions(yourId,ReferenceId){
const quantidade = 9 - parseInt(document.getElementById(yourId).value)
const select = document.getElementById(ReferenceId)
select.innerHTML = ""
for(var i = 0; i <= quantidade; i++){
select.innerHTML += `<option value="${i}">${i}</option>`
}
}
<select class='opcoes' id="pecasDoJogo-1Auto" onchange="changeQuantityOfOptions('pecasDoJogo-1Auto','pecasDoJogo-1TeleOp')">
<option value="0" >0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
<select class='opcoes' id="pecasDoJogo-1TeleOp" onchange="changeQuantityOfOptions('pecasDoJogo-1TeleOp','pecasDoJogo-1Auto')">
<option value="0">0</option>
<option value="1" >1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>

Showing selected values from drop down list

i want to select values from select drop down list and print them in <div
like if i select 0 and prints 0 automatically
like values are 0 4 5
<select>
<option value="0">0</option>
<option value="1">1</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
<select>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
<div id="show_values"><!--345 --></div>

You can do it by using jquery's change event and append values on your div when changing options in this way.
$('select').on('change', function (e) {
var txt = $(this).val();
$('#show_values').append(txt+" ");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
<option value="0">0</option>
<option value="1">1</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
<select>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
<div id="show_values"></div>

How to make specific options to appear in select menu?

I have two select fields in a program. Both select fields contain options with values 1 to 10. the code is as below:
<select id="noc">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select><br/>
<!--Some text---->
<select id="po">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
I want to achieve the following effect using JavaScript :
(Only for example) If the user has selected the option 8 in the first select field (id="noc"), the options below 8 (i.e. 9 and 10) should not be visible in the second select field (id="po").

You can do it with using onChange method and with querySelectorAll.
display or visibility attributes doesn't work for cross browsers. So you should recreate options.
var noc=document.getElementById("noc");
var po=document.getElementById("po");
var options=po.querySelectorAll("option");
function nochange(){
po.innerHTML="";
[...options].filter(x=>parseInt(x.value)<=parseInt(noc.value)).forEach(x=>{po.append(x)})
po.value=noc.value;
}
<select id="noc"onChange="nochange()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select><br/>
<!--Some text---->
<select id="po">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>

You can try this, when the selected option first select (noc) changes, loop over the options in the second select (po) and hide its options whose values are greater than the value of the option selected in the first select (noc).
const noc = document.getElementById('noc');
const po = document.getElementById('po');
noc.addEventListener('change', (e) => {
[...po.children].forEach(child => {
if (Number(child.getAttribute('value')) > e.target.value) {
return child.style.display = 'none'
}
})
});
<select id="noc">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select><br/>
<!--Some text---->
<select id="po">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>

const max = 10;
var items = [...Array(max).keys()]
var noc = document.getElementById("noc");
var po = document.getElementById("po");
items.forEach(n => {
var opt = document.createElement("select");
opt.value = n;
noc.appendChild(opt);
po.appendChild(opt);
});
noc.addEventListener("change", e => {
var selected = e.target.value;
po.querySelectorAll("option").forEach((el, index) => {
if (selected < index) {
el.style.display = "visible";
} else {
el.style.display = "none";
}
});
});
.invisible {
display: none;
}
<select id="noc">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select><br/>
<!--Some text---->
<select id="po">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>

Element by Name on load setting value

Trying to get the page to load with default selected option 2
Well neither are working, what's correct?
My HTML is like this, no ID or class
$(window).load(function() {
$("tour-adult[]").value = 3;
document.getElementById("tour-adult[]").value = 4;
});
<div class="tourmaster-combobox-wrap">
<select name="tour-adult[]">
<option value="">Adult</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</div>

Using jQuery:
Use .on('load', () {...} instead of .load() - Why?
Use an attribute selector like $("[attribute='attributeName']")
Pass the value as a String, not a Number
$(window).on('load', function() {
$('select[name="tour-adult[]"]').val('3');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tourmaster-combobox-wrap">
<select name="tour-adult[]">
<option value="">Adult</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</div>

As far as your first attempt, try selecting the select element by it's name attribute and using jQuery's val() method to set the value:
$("select[name='tour-adult[]']").val(3);
You currently don't have an id assigned to the select. If you want to go native, you'd use something like querySelector:
document.querySelector("select[name='tour-adult[]']").value = 4;
$(window).on('load', function() {
$("select[name='tour-adult[]']").val(3);
console.log($("select[name='tour-adult[]']").val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tourmaster-combobox-wrap">
<select name="tour-adult[]">
<option value="">Adult</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</div>

If you want to call it by ID, you will need to add an ID. I removed your jquery and added an ID and its working.
document.getElementById("tour-adult").value = 4;
<div class="tourmaster-combobox-wrap">
<select id="tour-adult" name="tour-adult[]">
<option value="">Adult</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</div>

.val() alternative that gets the current value of all elements in the set of matched elements

I have 3 select elements and I'm using $(".select-elem select").val() to get the value of each select element in an array but it returns the value of only the first element in the set of matched elements. For example, if a user selects '2' for the first select element, '3' for the second, and '4' for the third, the val() function returns 2 instead of [2,3,4]. Is there a function that would return an array containing values of all three select elements?
<td class="select-elem">
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</td>
<td class="select-elem">
<select>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</td>
<td class="select-elem">
<select>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</td>

Use map methods for this:
var values = $(".select-elem select").map(function() {
return $(this).val();
}).get();

Create your own jquery method and use it wherever you need, find the following code
//create jquery method arrVal which returns array of values
$.fn.arrVal = function () {
var valArr = [];
$(this).each(function(){
valArr.push($(this).val())
})
return valArr;
}
//call arrVal method
$('select').arrVal()

Develop Reference

JavaScript is the programming language of the Web.

JavaScript localStorage returning 1? - javascript

Related

The options do not change on the cell phone, only on the computer

Showing selected values from drop down list

How to make specific options to appear in select menu?

Element by Name on load setting value

.val() alternative that gets the current value of all elements in the set of matched elements

Categories

Resources