How do I add an event handler to my select element in my form so each option carries a different value for the formula created | Sololearn: Learn to code for FREE!
New course! Every coder should learn Generative AI!
Try a free lesson
0

How do I add an event handler to my select element in my form so each option carries a different value for the formula created

31st Oct 2020, 12:55 PM
Bright Eyo
Bright Eyo - avatar
4 Answers
+ 3
https://code.sololearn.com/W0uX1dR38983/?ref=app Here's the fix. You did a lot of mistakes, such as: 1) Some ids you wrote in js were never even mentioned in html such as "button" 2) You were storing the Html input fields in those variables, not their values. You have to do document.getElementById("id").value to get the value. 3) It is <option> not <options>. And you didn't give them values. You will see "onload = () => {}". It means that run javascript AFTER html has loaded otherwise it was giving errors that those input fields are not defined (coz html didnt load first). Inside if statements, you can change the annual and initial allowances according to the plans i.e "plant", "furniture". Inside the allowance function's parameters, i wrote " = 1 " which means that if undefined is provided, it would take 1, you should change " = 1 " to whatever you want their default values to be. And i dont know who hates me lol, i got a downvote on my replies above.
1st Nov 2020, 3:16 PM
maf
maf - avatar
+ 2
Hi Bright Eyo, I think you will have a better chance for answer if you'd just share your code. As it is now, "value for formula" left people with wild guesses of what they are. And please also add HTML and Javascript in the tags above ☝ Good luck! https://www.sololearn.com/post/75089/?ref=app
31st Oct 2020, 1:07 PM
Ipang
+ 1
Can't understand your question, is this what u r asking? I added an onchange eventhandler on select with js. <select> <option value="value1">Value 1</option> <option value="value2">Value 2</option> </select> let select = document.querySelector("select") select.addEventListener("change", (e) => { console.log("New Option Selected", e.target.value) /* e means event which you automatically receive as a parameter in these event functions, inside it is target property, e.target means the element on which that action occurred, and e.target.value means the value of the select element. */ }) An alternative way: select.onchange = function(e) { console.log("New Option Selected", e.target.value) }
31st Oct 2020, 1:32 PM
maf
maf - avatar
0
Your answer is close to what I need. What I need is how to create an event with the select option. Each option has its annualAllowance and initialAllowance which are the parameters of the function in the script. So when a user selects an option the annualAllowance value and the initialAllowance value of the function is passed in each option. Here is an example of my code below if it helps clarify the issue. https://code.sololearn.com/WM3uyBexwYoZ/?ref=app
1st Nov 2020, 1:46 PM
Bright Eyo
Bright Eyo - avatar