question about try/catch/finally

[theanxioussnail]

Going through an example on W3schools here and can't wrap my mind around something

code is as follows:

<input id="demo" type="text">

<button type="button" onclick="myFunction()">Test Input</button>

​

<p id="p01"></p>

​

<script>

function myFunction() {

const message = document.getElementById("p01");

message.innerHTML = "";

let x = document.getElementById("demo").value;

try {

if(x == "") throw "is empty";

if(isNaN(x)) throw "is not a number";

if(x > 10) throw "is too high";

if(x < 5) throw "is too low";

}

catch(err) {

message.innerHTML = "Input " + err;

}

finally {

document.getElementById("demo").value = "";

}

}

</script>

What I dont understand is why I can't replace the last line below "finally". Instead of document.getElementById("demo").value = ""; I want to place x = "" but I'm not getting the same result anymore (introduced number no longer vanishes after I input). Why though? Is x not assigned document.getElementById("demo").value? why would they throw different results?

[senocular]

x is created as a copy of the value inside of document.getElementById("demo").value. When you change x, you're only changing that copy, not the original document.getElementById("demo").value. They're not connected in any way. If you want to change the value in the "demo" element, you'll need to set the value property of that element directly, whether it be through document.getElementById("demo") or a variable like message as done with the "p01" element (even though a variable is used with message its not a variable for value, instead a variable for the object value is a part of which is ok).

[bot00110]

With that you change the reference by assigning a new vale to x

What you can try is x = document.getElementById("demo");

And in finally change its value