Dynamically change span text based on selected option javascript

Question

I'm trying to change dynamically the text of a span based on the the option that got selected. PS: I'm using Django + Python to generate options

Here is my code :

<select class="form-control" id="materials">
    {% for material2 in materials %}
        <option value="{{ material2.name }}">{{ material2.name }}</option>
    {% endfor %}
</select>
<span id="material_display></span>

I've tried :

var selected_material = document.getElementById("materials").value;
document.getElementById("material_display").innerTEXT = selected_material

But that didn't work out.

innerText, you have a case difference. Also are you doing this logic as part of a change event handler or something? — Taplar
– Taplar, Commented Jul 27, 2018 at 16:21

Unmitigated · Accepted Answer · 2018-07-27 16:25:19Z

1

It's innerText, not innerTEXT and the id of your span is not closed properly; you only have one quotation mark to the left of the id and are missing the quotation mark to the right of the id.

You also need to attach your function to an Event Handler like onchange for your select.

<select id="materials" onchange="showChange()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br/>
<span id="material_display"></span>
<script>
function showChange(){
var selected_material = document.getElementById("materials").value;
document.getElementById("material_display").innerText = selected_material;
}
</script>

edited Jul 27, 2018 at 16:25

answered Jul 27, 2018 at 16:23

Unmitigated

91.4k12 gold badges102 silver badges109 bronze badges

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

Collectives™ on Stack Overflow

Dynamically change span text based on selected option javascript

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related