How do I change a variable with the change of a select option in an html form?
Question
I am trying to change my variable, "year", whenever the user changes his answer in a selection list in my html form. I want to change "year" to whatever year is currently selected, so if the user selects "2022," I want my variable year to be equal to 2022. I tried using "event" as my parameter for my function setYear(), but that was unsuccessful. Any help would be greatly appreciated.
var year;
<script type="text/javascript">
function setYear(a) {
year = a;
}
</script>
<form>
<tr>
<td>Year: </td>
<td><select name="Year" onchange="setYear(event)">
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
</select></td>
</tr>
</form>
5 answers
solution1
0 2020-03-21 05:07:15
Dont declare
varoutside script.<script type="text/javascript"> var year; function setYear(a) { year = a.target.value; } </script>
solution2
0 ACCPTED 2020-03-21 05:07:32
Your code:
var year;
<script type="text/javascript">
function setYear(a) {
year = a;
}
</script>
<form>
<tr>
<td>Year: </td>
<td><select name="Year" onchange="setYear(event)">
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
</select></td>
</tr>
</form>
You are declaring variable var outside <script> tag. Because, var is declared outside of <script> tag, it will not visible to the javaScript function.
Also, you are seting var to the event argument. This code might work.
<script type="text/javascript">
var year;
function setYear(a) {
year = a;
}
</script>
<form>
<tr>
<td>Year: </td>
<td><select name="Year" onchange="setYear(this.value)">
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
</select></td>
</tr>
</form>
solution3
0 2020-03-21 05:08:50
first, define var year define inside the script and then get a.target.value and use it whenever you want
<script type="text/javascript">
var year;
function setYear(a) {
year = a.target.value;
console.log(year);
}
</script>
solution4
0 2020-03-21 05:11:38
You can use this to reference the select DOM element:
<script type="text/javascript">
let year
function setYear(a) {
year = a
}
</script>
<select name="Year" onchange="setYear(this.value)">
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
</select>
Inline JavaScript like this is a bit outdated however. For a more modern approach, use document.querySelector to get the DOM node, and register an event listener that fires when it changes. This way, you don't have to mix HTML and JS:
<script type="text/javascript">
let year
const yearSelect = document.querySelector('#yearSelect')
yearSelect.addEventListener('change', e => {
year = e.target.value
})
</script>
<select id="yearSelect" name="Year">
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
</select>
solution5
0 2020-03-21 05:31:09
First of all you should not be using <td> and <tr> without a <table> tag.
The <tr> tag defines the table rows. The <td> tag defines the standard cells in the table.
Then, in the onchange event you should pass this as a parameter. It will reference the select DOM element of your HTML. In your function you will now be able to know which year of your select was selected.
select.options[select.selectedIndex].value;
select: Your DOM element.
options: All the options of your select as an array
select.selectedIndex: The index selected by the user (Corresponds to a number)
value: The value of the selected option.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body>
<form>
<label>Year:</label>
<select name="Year" onchange="setYear(this)">
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
</select>
</form>
</body>
<script type="text/javascript">
var year;
function setYear(select) {
year = select.options[select.selectedIndex].value;
}
</script>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.