onchange() on dropdown not calling the function
Question
Below is my HTML code:
I want the script to run when an option is selected. I think the code I have written in correct. console.log() is not printing anything on the console so this means the function is not invoked. Can anybody help me? This is very basic code but I don't know whats wrong in it.
<div class="form-group required">
<label for="InputLastName">For how many hours ? <sup>*</sup> </label>
<select name="serviceHours" id="hours" onchange="getHours(this.value)">
<option value="" selected>---------</option>
<option value="1">1 Hour</option>
<option value="2">2 Hours</option>
<option value="3">3 Hours</option>
<option value="4">4 Hours</option>
<option value="5">5 Hours</option>
<option value="6">6 Hours</option>
<option value="7">7 Hours</option>
<option value="8">8 Hours</option>
<option value="9">9 Hours</option>
<option value="10">10 Hours</option>
<option value="11">11 Hours</option>
<option value="12">12 Hours</option>
</select>
<script type="text/javascript">
function getHours(value){
var hours = value;
console.log(hours+ " hello");
}
</script>
</div>
If I change the function name the console is not giving an error undefined functions or function not found .
if I replace onchange="getHours(this.value)" with onchange="alert(this.value);" it is not working then also.
Can anyone tell the jquery way of doing this ??
3 answers
solution1
0 2015-07-01 07:30:06
your answer seems correct.
the only change I made was separating the js into another file, and making the function in the manner I write it.
From:
<script type="text/javascript">
function getHours(value){
var hours = value;
console.log(hours+ " hello");
}
</script>
To:
var getHours = function (value) {
var hours = value;
alert(hours + " hello");
};
This syntax change shouldn't make a difference.
solution2
0 2015-07-01 07:38:22
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>
Exp
</title>
</head>
<body>
<div class="form-group required">
<label for="InputLastName">For how many hours ? <sup>*</sup> </label>
<select name="serviceHours" id="hours" onChange="getHours()">
<option value="" selected>---------</option>
<option value="1">1 Hour</option>
<option value="2">2 Hours</option>
<option value="3">3 Hours</option>
<option value="4">4 Hours</option>
<option value="5">5 Hours</option>
<option value="6">6 Hours</option>
<option value="7">7 Hours</option>
<option value="8">8 Hours</option>
<option value="9">9 Hours</option>
<option value="10">10 Hours</option>
<option value="11">11 Hours</option>
<option value="12">12 Hours</option>
</select>
</div>
<script type="text/javascript">
function getHours(){
var hours = document.getElementById("hours").value;
alert(hours);
}
</script>
</body>
</html>
The above code alerts with the number of hours. Maybe this will help.
solution3
0 2021-02-09 16:40:27
Finally got the reason behind the error. Thanks to Chrome INSPECT Some words are reserved in js. You should not use names like value,class for the variable name in the function. Try changing the name to something like "hijk" and it will work.
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.