I noticed this strange thing (at least for newbie like me). I attach JSfiddle script: https://jsfiddle.net/kubaSpolsky/5dn67frg/1/
Steps: 1) choose one of the values 2) click on Display 3) Reset 4) Select once again 5) Display ... this time appears "undifined"
<!DOCTYPE html>
<body>
<select id="test" name="" class="form-control">
<option value="0">Choose...</option>
<option value="foo">foo</option>
<option value="boo">boo</option>
</select>
<button id="btn_1">Display</button>
<button id="btn_2">Reset</button>
<p id="result"></p>
</body>
<script type="text/javascript">
let test = document.getElementById("test");
let btnDisplay = document.getElementById("btn_1");
let btnReset = document.getElementById("btn_2");
let p = document.getElementById("result");
btnDisplay.onclick = function(){
console.log(test.value)
p.innerHTML = test.value;
}
btnReset.onclick = function(){
test = document.getElementById("test").value = "0";
}
</script>
Any idea why?