How to choose and work with a drop down list in js

by

This line:

} else if (dropDownList.selectedIndex = 1) {

needs to use a comparison equals operator rather than an assignment equals operator:

} else if (dropDownList.selectedIndex === 1) {

The other if/else clauses are similarly incorrect.

I highly recommend using a decent IDE, it would highlight potential mistakes like this for you.

You will also need to change this:

dropDownList.selectedIndex--;
document.getElementById('form').innerHTML = formArray[dropDownList.selectedIndex];

to this:

document.getElementById('form').innerHTML = formArray[dropDownList.selectedIndex - 1];

The selectedIndex is live, if you change it using -- that will cause the selected value to be updated.

The way the result is output assumes there is an <h3> with the id resultField but only one of your forms has that id set.

Other miscellaneous suggestions include…

The id attributes need to be unique throughout the document. You currently have 3 hidden forms and you copy around the HTML, leading to 4 elements with each id (resultField, fieldx, fieldy). Whether document.getElementById grabs the right one is down to luck.

Rather than copying around the innerHTML of those forms you’d be better off simply showing and hiding the existing forms using CSS. Alternatively you could use just 1 form and update the relevant text to match the current algorithm.

Listening for the submit event of the form seems odd. Why not use a regular button and listen for the click event?

If you do decide to keep the 3 forms I would suggest registering separate button handlers for each one. The fact that so much of your code is inside a big if/else is a sign that you actually need multiple functions rather than a single function that has to figure out which mode it is in. The code they share could be factored out if appropriate.

More Related Contents:

  1. Apply a smarty modifier to JS?
  2. How do I debug Node.js applications?
  3. Is it possible to gain access to the closure of a function?
  4. Why is array.push sometimes faster than array[n] = value?
  5. Download data URL file
  6. How to use split?
  7. Is it possible to override JavaScript’s toString() function to provide meaningful output for debugging?
  8. Trigger css hover with JS [duplicate]
  9. Why does the argument for Array.prototype.includes(searchElement) need the same type as array elements?
  10. Can I disable a CSS :hover effect via JavaScript?
  11. javascript modules and CORS
  12. how to display a javascript var in html body
  13. What is the best way to initialize a JavaScript Date to midnight?
  14. When to use the double not (!!) operator in JavaScript
  15. How to record webcam and audio using webRTC and a server-based Peer connection
  16. Setting href attribute at runtime
  17. How to loop and render elements in React.js without an array of objects to map?
  18. force browsers to get latest js and css files in asp.net application
  19. how to extract floating numbers from strings in javascript
  20. How to change the playing speed of videos in HTML5?
  21. JSLint Expected ‘===’ and instead saw ‘==’
  22. Sieve of Eratosthenes algorithm in JavaScript running endless for large number
  23. d3.js chemical tube bar chart
  24. How to pass variable value between different html pages in javascript
  25. PhoneGap: Detect if running on desktop browser
  26. Selecting a JSON object with a colon in the key
  27. Attach a blob to an input of type file in a form
  28. Confirm postback OnClientClick button ASP.NET
  29. Getting Textbox value in Javascript
  30. How to disable an input type=text?

Leave a Comment