1

Say you had the HTML code of <select id="eight"><option value="Number1">Number 1</option></select>.

In JavaScript, if you wanted to get the value of the selected item in the drop-down list, there would be two ways being document.getElementsByTagName("option")[0].innerText; and document.getElementsByTagName("option")[0].value;.

The first would output the text in the option tag (being "Number 1", and the other will output the value of the option tag (being "Number1").

Which one would be more effective in JavaScript? Speed difference? Is there another way to get the value that is faster or more efficient. Etc. Sorry if this is a duplicate.

Bill Joe
  • 85
  • 8
  • 1
    "Which one would be more effective in JavaScript? " — They have different content, so it depends entirely on what content you need. – Quentin Feb 09 '21 at 17:37
  • 4
    "Speed difference?" — https://wiki.c2.com/?PrematureOptimization – Quentin Feb 09 '21 at 17:37
  • 3
    `.innerText` gets you the content of the tag, while `.value` gets you the content of the "value" attribute. The two are completely different. – Pointy Feb 09 '21 at 17:37
  • 3
    You may have an internationalized application such that the text content is determined by the language in use, while the value is a symbol that's meaningful to your software independent of display language. Relying on text content is in general a terrible idea. – Pointy Feb 09 '21 at 17:38
  • I understand they are completely different, but if I were to test what the selected list item is in the drop-down which one would I choose? Also speed by which one gives you an output faster the `document.getElementsByTagName("option")[0].innerText;`, or `document.getElementsByTagName("option")[0].value;`. – Bill Joe Feb 09 '21 at 17:39
  • 1
    @BillJoe — Depends entirely on what you are testing it against. – Quentin Feb 09 '21 at 17:40
  • 1
    `Which one should I choose`, if you need the inner text, choose `.innerText`, and if you need the `value` attribute, choose `.value` :) If you're hungry, eat, and if you're thirsty, drink. – Jeremy Thille Feb 09 '21 at 17:42
  • Also another question: Where could be a way to test the speed of the output? – Bill Joe Feb 09 '21 at 17:43
  • There are tools for speed comparison, like [jsbench](https://jsbench.me/) – Jeremy Thille Feb 09 '21 at 17:44
  • What may *take some time*, while I'm not sure it is measurable, is the element lookup `document.getElementsByTagName("option")[0]`. Once the element is looked up, getting one or the other property is absolutely the same. – Louys Patrice Bessette Feb 09 '21 at 17:46
  • Seriously: Do not care about which of two very fast things is faster until you have a performance bottleneck you need to solve and you have determined that said bottleneck is in this part of the code. – Quentin Feb 09 '21 at 17:52
  • I would like to have an efficient program that's all. I didn't know if there would be a speed difference between the two pieces of code. – Bill Joe Feb 09 '21 at 17:56
  • I that is the only thing you found that could be optimized, then you already have an efficient program. I suggest you to post your working code on [Code Review](https://codereview.stackexchange.com/) if you want to have some advises on your code efficiency. – Louys Patrice Bessette Feb 09 '21 at 17:59
  • There is actually a huge [performance issue](https://stackoverflow.com/a/54952474/1169519) when using `getElementsByTagName`, use `querySelectorAll` instead. – Teemu Feb 09 '21 at 18:04
  • I edited my question to add another question about if there is another way to get the value of the selected list item in the drop-down list. @Teemu answers this though. – Bill Joe Feb 09 '21 at 18:13

1 Answers1

1

Yes there is, you can cal getElementById('id-of-select').value, it gets the current selected value of the select element, this should be the fastest. You can use document.querySelector too. So there are a total of 4 most effective ways to get it, but I'm sure getElementById is the fastest.

P.S.: it's irrelevant most of the time. Say you would note such a difference if you iterate for say 1 million times, then you would worry about such a thing (and by the way this is the way to test it's speed).

To Read: getElementById

Marco
  • 2,757
  • 1
  • 19
  • 24