Change var value from dropdown in javascript with onchange

Question

I have a dropdown list which looks like this:

<select id="cityID">
        <option value="mission">Mission</option>
        <option value="bakersfield">Bakersfield</option>
        <option value="knoxville">Knoxville</option>
</select>

And my code to get the value is:

var select = document.getElementById('cityID');
var text = select.options[select.selectedIndex].text;
text.innerHTML = cityID.value;

text.onchange = function(e) {
   text.innerHTML = e.target.value;
}

The value always chooses the first item. How can I get it to accept the cityID and change the page,

I'm sure its a formatting or typo or wrong value ?

Karthikeyan · Accepted Answer · 2022-04-13 08:57:22Z

1

You could achieve this using addEventListener also.

var select = document.getElementById('cityID');
var textEl = document.getElementById("text")
select.addEventListener("change", (e) => {
    textEl.innerText = e.target.value;
})

answered Apr 13, 2022 at 8:57

Karthikeyan

3212 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user18738090 Over a year ago

No mater what I use I get this: api.openweathermap.org/data/2.5/… I tried select, text, textEL, cityID, e and all the same basic result?

user18738090 Over a year ago

I need to insert the value into this line: api.openweathermap.org/data/2.5/weather?q=' + variable from dropdown select + '&appid=' + key)

user18738090 Over a year ago

Well I added to the code and now the variable is being passed correct, but while the select box shows the selections and it works, the <script> section is not refreshing on any changes. What ever is the first value is in the list it just stays that.

Peterrabbit · Accepted Answer · 2022-04-13 08:25:32Z

1

onchange event is trigger from the select element
your text variable seems to be an HTML element because you set its innerHTML property
a select element has a "value" property so you don't need to get it from the selectedIndex of the options.

var select = document.getElementById('cityID');
var textEl = document.getElementById("text")
text.innerHTML = select.value;

select.onchange = function(e) {
   textEl.innerHTML = e.target.value;
}

<select id="cityID">
        <option value="mission">Mission</option>
        <option value="bakersfield">Bakersfield</option>
        <option value="knoxville">Knoxville</option>
</select>

<p id="text"></p>

answered Apr 13, 2022 at 8:25

Peterrabbit

2,2651 gold badge5 silver badges19 bronze badges

Collectives™ on Stack Overflow

Change var value from dropdown in javascript with onchange

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related