Why do I get this reference error for an undefined variable when I run this js function
Question
Here is my HTML:
<head>
<link rel="stylesheet" href="form.css">
<script type="text/javascript" src="form.js"></script>
</head>
<body>
<div id="wrapper">
<center>
<h1 hidden id="result">If you are traveling in <span class="input" id="countryt">(ctry)</span> and find yourself having to cross a piranha-filled river, here's how to do it <span class="input" id="adverbGroup1t">(adv1)</span>: Pirahnas are more <span class="input" id="adjectiveGroup1t">(adj1)</span> during the day, so cross the river at night. Avoid areas with netted <span class="input" id="animalt">(anml)</span> traps, piranhas may be <span class="input" id="verbGroup1t">(vrb1)</span> there looking to <span class="input" id="verbGroup2t">(vrb2)</span> you! When <span class="input" id="verbGroup3t"></span>(vrb3) the river, swim <span class="input" id="adverbGroup2t">(adv2)</span>. You don't want to wake them up and make them <span class="input" id="adjectiveGroup2t">(adj2)</span>! Whatever you do, if you have an open wound, try to find another way to get back to <span class="input" id="country2t">(ctry2)</span>. Pirahnas are attracted to fresh <span class="input" id="liquidt">(lqd)</span> and will most likely take a bite out of your <span class="input" id="bodyPartt">(bp)</span> if you <span class="input" id="verbGroup4t">(vrb4)</span> the water!</h1>
<h1 id="headText">Fill In The Form</h1>
<!-- <form action="form.php" method="post"> -->
<div id="form-elements"></div>
<form onsubmit="submitted()" id="form">
<p>A Country:</p>
<input autocomplete="off" type="text" name="country2Input" id="country">
<p>=============================</p>
<p>An Adverb:</p>
<input type="radio" value="awfully" id="awfully" name="adverbGroup1">
<label for="awfully">awfully</label>
<input type="radio" value="slowly" id="slowly" name="adverbGroup1">
<label for="slowly">slowly</label>
<input type="radio" value="clumsily" id="clumsily" name="adverbGroup1">
<label for="clumsily">clumsily</label>
<p>=============================</p>
<p>An Adjective:</p>
<input type="radio" value="amused" id="amused" name="adjectiveGroup1">
<label for="amused">amused</label>
<input type="radio" value="adventerous" id="adventerous" name="adjectiveGroup1">
<label for="adventerous">adventerous</label>
<input type="radio" value="little" id="little" name="adjectiveGroup1">
<label for="little">little</label>
<p>=============================</p>
<p>An Animal:</p>
<input autocomplete="off" type="text"name="animalInput" id="animal">
<p>=============================</p>
<p>A Verb:</p>
<input type="radio" value="running" value="" id="running" name="verbGroup1">
<label for="running">running</label>
<input type="radio" value="dancing" value="" id="dancing" name="verbGroup1">
<label for="dancing">dancing</label>
<input type="radio" value="thinking" value="" id="thinking" name="verbGroup1">
<label for="thinking">thinking</label>
<p>=============================</p>
<p>Another Verb:</p>
<input type="radio" value="leave" value="" id="leave" name="verbGroup2">
<label for="leave">leave</label>
<input type="radio" value="bend" value="" id="bend" name="verbGroup2">
<label for="bend">bend</label>
<input type="radio" value="watch" value="" id="watch" name="verbGroup2">
<label for="watch">watch</label>
<p>=============================</p>
<p>Another Verb:</p>
<input type="radio" value="capturing" id="capturing" name="verbGroup3">
<label for="capturing">capturing</label>
<input type="radio" value="drinking" id="drinking" name="verbGroup3">
<label for="drinking">drinking</label>
<input type="radio" value="creating" id="creating" name="verbGroup3">
<label for="creating">creating</label>
<p>=============================</p>
<p>Another Adverb:</p>
<input type="radio" value="carelessly" id="carelessly" name="adverbGroup2">
<label for="carelessly">carelessly</label>
<input type="radio" value="rapidly" id="rapidly" name="adverbGroup2">
<label for="rapidly">rapidly</label>
<input type="radio" value="greedily" id="greedily" name="adverbGroup2">
<label for="greedily">greedily</label>
<p>=============================</p>
<p>Another Adjective:</p>
<input type="radio" value="invisible" id="invisible" name="adjectiveGroup2">
<label for="invisible">invisible</label>
<input type="radio" value="insane" id="insane" name="adjectiveGroup2">
<label for="insane">insane</label>
<input type="radio" value="confused" id="confused" name="adjectiveGroup2">
<label for="confused">confused</label>
<p>=============================</p>
<p>Another Country:</p>
<input autocomplete="off" type="text" name="countryInput" id="country2">
<p>=============================</p>
<p>A type of liquid:</p>
<input type="radio" value="gasoline" id="gasoline" name="liquid">
<label for="gasoline">gasoline</label>
<input type="radio" value="water" id="water" name="liquid">
<label for="water">water</label>
<input type="radio" value="coffee" id="coffee" name="liquid">
<label for="coffee">coffee</label>
<p>=============================</p>
<p>Body Part:</p>
<input type="radio" value="toes" id="toes" name="bodyPart">
<label for="toes">toes</label>
<input type="radio" value="fingers" id="fingers" name="bodyPart">
<label for="fingers">fingers</label>
<input type="radio" value="face" id="face" name="bodyPart">
<label for="face">face</label>
<p>=============================</p>
<p>Another Verb:</p>
<input type="radio" value="clean" id="clean" name="verbGroup4">
<label for="clean">clean</label>
<input type="radio" value="watch" id="watch2" name="verbGroup4">
<label for="watch2">watch</label>
<input type="radio" value="escape" id="escape" name="verbGroup4">
<label for="escape">escape</label>
<br>
<br>
</form>
<button onclick="submitted()" id="sub" >Submit</button>
<button hidden onclick="show()" id="show">Show result</button>
</div>
</center>
</div>
</body>
</html>
And here is my JS
function submitted() {
const btn = document.querySelector('#sub');
btn.addEventListener("click", () => {
var countryvalue = document.getElementById("country").value
console.log(countryvalue)
//divider
const adverbGroup1s = document.querySelectorAll('input[name="adverbGroup1"]');
let adverbGroup1value;
for (const adverbGroup1 of adverbGroup1s) {
if (adverbGroup1.checked) {
adverbGroup1value = adverbGroup1.value;
console.log(adverbGroup1value)
break;
}
}
//divider
const adjectiveGroup1s = document.querySelectorAll('input[name="adjectiveGroup1"]');
let adjectiveGroup1value;
for (const adjectiveGroup1 of adjectiveGroup1s) {
if (adjectiveGroup1.checked) {
adjectiveGroup1value = adjectiveGroup1.value;
console.log(adjectiveGroup1value)
break;
}
}
//divider
var animalvalue = document.getElementById("animal").value
console.log(animalvalue)
//divider
const verbGroup1s = document.querySelectorAll('input[name="verbGroup1"]');
let verbGroup1value;
for (const verbGroup1 of verbGroup1s) {
if (verbGroup1.checked) {
verbGroup1value = verbGroup1.value;
console.log(verbGroup1value)
break;
}
}
//divider
const verbGroup2s = document.querySelectorAll('input[name="verbGroup2"]');
let verbGroup2value;
for (const verbGroup2 of verbGroup2s) {
if (verbGroup2.checked) {
verbGroup2value = verbGroup2.value;
console.log(verbGroup2value)
break;
}
}
//divider
const verbGroup3s = document.querySelectorAll('input[name="verbGroup3"]');
let verbGroup3value;
for (const verbGroup3 of verbGroup3s) {
if (verbGroup3.checked) {
verbGroup3value = verbGroup3.value;
console.log(verbGroup3value)
break;
}
}
//divider
const adverbGroup2s = document.querySelectorAll('input[name="adverbGroup2"]');
let adverbGroup2value;
for (const adverbGroup2 of adverbGroup2s) {
if (adverbGroup2.checked) {
adverbGroup2value = adverbGroup2.value;
console.log(adverbGroup2value)
break;
}
}
//divider
const adjectiveGroup2s = document.querySelectorAll('input[name="adjectiveGroup2"]');
let adjectiveGroup2value;
for (const adjectiveGroup2 of adjectiveGroup2s) {
if (adjectiveGroup2.checked) {
adjectiveGroup2value = adjectiveGroup2.value;
console.log(adjectiveGroup2value)
break;
}
}
//divider
var country2value = document.getElementById("country2").value
console.log(country2value)
//divider
const liquids = document.querySelectorAll('input[name="liquid"]');
let liquidvalue;
for (const liquid of liquids) {
if (liquid.checked) {
liquidvalue = liquid.value;
console.log(liquidvalue)
break;
}
}
//divider
const bodyParts = document.querySelectorAll('input[name="bodyPart"]');
let bodyPartvalue;
for (const bodyPart of bodyParts) {
if (bodyPart.checked) {
bodyPartvalue = bodyPart.value;
console.log(bodyPartvalue)
break;
}
}
//divider
const verbGroup4s = document.querySelectorAll('input[name="verbGroup4"]');
let verbGroup4value;
for (const verbGroup4 of verbGroup4s) {
if (verbGroup4.checked) {
verbGroup4value = verbGroup4.value;
console.log(verbGroup4value)
break;
}
}
document.getElementById("form").reset();
document.getElementById("show").hidden = false
});
}
function show() {
document.getElementById("form").hidden = true
document.getElementById("sub").hidden = true
document.getElementById("show").hidden = true
document.getElementById("headText").hidden = true
document.getElementById("result").hidden = false
document.getElementById("countryt").innerHTML = countryvalue
document.getElementById("adverbGroup1t").innerHTML = adverbGroup1value
document.getElementById("adjectiveGroup1t").innerHTML = adjectiveGroup1value
document.getElementById("animalt").innerHTML = animalvalue
document.getElementById("verbGroup1t").innerHTML = verbGroup1value
document.getElementById("verbGroup2t").innerHTML = verbGroup2value
document.getElementById("verbGroup3t").innerHTML = verbGroup3value
document.getElementById("adverbGroup2t").innerHTML = adverbGroup2value
document.getElementById("adjectiveGroup2t").innerHTML = adjectiveGroup2value
document.getElementById("country2t").innerHTML = country2value
document.getElementById("liquidt").innerHTML = liquidvalue
document.getElementById("bodyPartt").innerHTML = bodyPartvalue
document.getElementById("verbGroup4t").innerHTML = verbGroup4value
}
When I run this, I expect all of the content inside each span tag to be replaced with its correct strings which are stored in the variables which end with "value"
However, whenever I run this, I get this error: "Uncaught ReferenceError: countryvalue is not defined at show (form.js:174:53) at HTMLButtonElement.onclick ((index):110:47)"
How do I make this work as I explained earlier
2 answers
solution1
0 2022-07-19 23:37:43
hi bro
You should put your script file at the end of the html file and make sure that the file address is correct.
function submitted() { const btn = document.querySelector('#sub'); btn.addEventListener("click", () => { var countryvalue = document.getElementById("country").value console.log(countryvalue) //divider const adverbGroup1s = document.querySelectorAll('input[name="adverbGroup1"]'); let adverbGroup1value; for (const adverbGroup1 of adverbGroup1s) { if (adverbGroup1.checked) { adverbGroup1value = adverbGroup1.value; console.log(adverbGroup1value) break; } } //divider const adjectiveGroup1s = document.querySelectorAll('input[name="adjectiveGroup1"]'); let adjectiveGroup1value; for (const adjectiveGroup1 of adjectiveGroup1s) { if (adjectiveGroup1.checked) { adjectiveGroup1value = adjectiveGroup1.value; console.log(adjectiveGroup1value) break; } } //divider var animalvalue = document.getElementById("animal").value console.log(animalvalue) //divider const verbGroup1s = document.querySelectorAll('input[name="verbGroup1"]'); let verbGroup1value; for (const verbGroup1 of verbGroup1s) { if (verbGroup1.checked) { verbGroup1value = verbGroup1.value; console.log(verbGroup1value) break; } } //divider const verbGroup2s = document.querySelectorAll('input[name="verbGroup2"]'); let verbGroup2value; for (const verbGroup2 of verbGroup2s) { if (verbGroup2.checked) { verbGroup2value = verbGroup2.value; console.log(verbGroup2value) break; } } //divider const verbGroup3s = document.querySelectorAll('input[name="verbGroup3"]'); let verbGroup3value; for (const verbGroup3 of verbGroup3s) { if (verbGroup3.checked) { verbGroup3value = verbGroup3.value; console.log(verbGroup3value) break; } } //divider const adverbGroup2s = document.querySelectorAll('input[name="adverbGroup2"]'); let adverbGroup2value; for (const adverbGroup2 of adverbGroup2s) { if (adverbGroup2.checked) { adverbGroup2value = adverbGroup2.value; console.log(adverbGroup2value) break; } } //divider const adjectiveGroup2s = document.querySelectorAll('input[name="adjectiveGroup2"]'); let adjectiveGroup2value; for (const adjectiveGroup2 of adjectiveGroup2s) { if (adjectiveGroup2.checked) { adjectiveGroup2value = adjectiveGroup2.value; console.log(adjectiveGroup2value) break; } } //divider var country2value = document.getElementById("country2").value console.log(country2value) //divider const liquids = document.querySelectorAll('input[name="liquid"]'); let liquidvalue; for (const liquid of liquids) { if (liquid.checked) { liquidvalue = liquid.value; console.log(liquidvalue) break; } } //divider const bodyParts = document.querySelectorAll('input[name="bodyPart"]'); let bodyPartvalue; for (const bodyPart of bodyParts) { if (bodyPart.checked) { bodyPartvalue = bodyPart.value; console.log(bodyPartvalue) break; } } //divider const verbGroup4s = document.querySelectorAll('input[name="verbGroup4"]'); let verbGroup4value; for (const verbGroup4 of verbGroup4s) { if (verbGroup4.checked) { verbGroup4value = verbGroup4.value; console.log(verbGroup4value) break; } } document.getElementById("form").reset(); document.getElementById("show").hidden = false }); } function show() { document.getElementById("form").hidden = true document.getElementById("sub").hidden = true document.getElementById("show").hidden = true document.getElementById("headText").hidden = true document.getElementById("result").hidden = false document.getElementById("countryt").innerHTML = countryvalue document.getElementById("adverbGroup1t").innerHTML = adverbGroup1value document.getElementById("adjectiveGroup1t").innerHTML = adjectiveGroup1value document.getElementById("animalt").innerHTML = animalvalue document.getElementById("verbGroup1t").innerHTML = verbGroup1value document.getElementById("verbGroup2t").innerHTML = verbGroup2value document.getElementById("verbGroup3t").innerHTML = verbGroup3value document.getElementById("adverbGroup2t").innerHTML = adverbGroup2value document.getElementById("adjectiveGroup2t").innerHTML = adjectiveGroup2value document.getElementById("country2t").innerHTML = country2value document.getElementById("liquidt").innerHTML = liquidvalue document.getElementById("bodyPartt").innerHTML = bodyPartvalue document.getElementById("verbGroup4t").innerHTML = verbGroup4value }
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="form.css"> <script type="text/javascript" src="app.js"></script> </head> <body> <div id="wrapper"> <center> <h1 hidden id="result">If you are traveling in <span class="input" id="countryt">(ctry)</span> and find yourself having to cross a piranha-filled river, here's how to do it <span class="input" id="adverbGroup1t">(adv1)</span>: Pirahnas are more <span class="input" id="adjectiveGroup1t">(adj1)</span> during the day, so cross the river at night. Avoid areas with netted <span class="input" id="animalt">(anml)</span> traps, piranhas may be <span class="input" id="verbGroup1t">(vrb1)</span> there looking to <span class="input" id="verbGroup2t">(vrb2)</span> you! When <span class="input" id="verbGroup3t"></span>(vrb3) the river, swim <span class="input" id="adverbGroup2t">(adv2)</span>. You don't want to wake them up and make them <span class="input" id="adjectiveGroup2t">(adj2)</span>! Whatever you do, if you have an open wound, try to find another way to get back to <span class="input" id="country2t">(ctry2)</span>. Pirahnas are attracted to fresh <span class="input" id="liquidt">(lqd)</span> and will most likely take a bite out of your <span class="input" id="bodyPartt">(bp)</span> if you <span class="input" id="verbGroup4t">(vrb4)</span> the water!</h1> <h1 id="headText">Fill In The Form</h1> <!-- <form action="form.php" method="post"> --> <div id="form-elements"></div> <form onsubmit="submitted()" id="form"> <p>A Country:</p> <input autocomplete="off" type="text" name="country2Input" id="country"> <p>=============================</p> <p>An Adverb:</p> <input type="radio" value="awfully" id="awfully" name="adverbGroup1"> <label for="awfully">awfully</label> <input type="radio" value="slowly" id="slowly" name="adverbGroup1"> <label for="slowly">slowly</label> <input type="radio" value="clumsily" id="clumsily" name="adverbGroup1"> <label for="clumsily">clumsily</label> <p>=============================</p> <p>An Adjective:</p> <input type="radio" value="amused" id="amused" name="adjectiveGroup1"> <label for="amused">amused</label> <input type="radio" value="adventerous" id="adventerous" name="adjectiveGroup1"> <label for="adventerous">adventerous</label> <input type="radio" value="little" id="little" name="adjectiveGroup1"> <label for="little">little</label> <p>=============================</p> <p>An Animal:</p> <input autocomplete="off" type="text"name="animalInput" id="animal"> <p>=============================</p> <p>A Verb:</p> <input type="radio" value="running" value="" id="running" name="verbGroup1"> <label for="running">running</label> <input type="radio" value="dancing" value="" id="dancing" name="verbGroup1"> <label for="dancing">dancing</label> <input type="radio" value="thinking" value="" id="thinking" name="verbGroup1"> <label for="thinking">thinking</label> <p>=============================</p> <p>Another Verb:</p> <input type="radio" value="leave" value="" id="leave" name="verbGroup2"> <label for="leave">leave</label> <input type="radio" value="bend" value="" id="bend" name="verbGroup2"> <label for="bend">bend</label> <input type="radio" value="watch" value="" id="watch" name="verbGroup2"> <label for="watch">watch</label> <p>=============================</p> <p>Another Verb:</p> <input type="radio" value="capturing" id="capturing" name="verbGroup3"> <label for="capturing">capturing</label> <input type="radio" value="drinking" id="drinking" name="verbGroup3"> <label for="drinking">drinking</label> <input type="radio" value="creating" id="creating" name="verbGroup3"> <label for="creating">creating</label> <p>=============================</p> <p>Another Adverb:</p> <input type="radio" value="carelessly" id="carelessly" name="adverbGroup2"> <label for="carelessly">carelessly</label> <input type="radio" value="rapidly" id="rapidly" name="adverbGroup2"> <label for="rapidly">rapidly</label> <input type="radio" value="greedily" id="greedily" name="adverbGroup2"> <label for="greedily">greedily</label> <p>=============================</p> <p>Another Adjective:</p> <input type="radio" value="invisible" id="invisible" name="adjectiveGroup2"> <label for="invisible">invisible</label> <input type="radio" value="insane" id="insane" name="adjectiveGroup2"> <label for="insane">insane</label> <input type="radio" value="confused" id="confused" name="adjectiveGroup2"> <label for="confused">confused</label> <p>=============================</p> <p>Another Country:</p> <input autocomplete="off" type="text" name="countryInput" id="country2"> <p>=============================</p> <p>A type of liquid:</p> <input type="radio" value="gasoline" id="gasoline" name="liquid"> <label for="gasoline">gasoline</label> <input type="radio" value="water" id="water" name="liquid"> <label for="water">water</label> <input type="radio" value="coffee" id="coffee" name="liquid"> <label for="coffee">coffee</label> <p>=============================</p> <p>Body Part:</p> <input type="radio" value="toes" id="toes" name="bodyPart"> <label for="toes">toes</label> <input type="radio" value="fingers" id="fingers" name="bodyPart"> <label for="fingers">fingers</label> <input type="radio" value="face" id="face" name="bodyPart"> <label for="face">face</label> <p>=============================</p> <p>Another Verb:</p> <input type="radio" value="clean" id="clean" name="verbGroup4"> <label for="clean">clean</label> <input type="radio" value="watch" id="watch2" name="verbGroup4"> <label for="watch2">watch</label> <input type="radio" value="escape" id="escape" name="verbGroup4"> <label for="escape">escape</label> <br> <br> </form> <button onclick="submitted()" id="sub" >Submit</button> <button hidden onclick="show()" id="show">Show result</button> </div> </center> </div> </body> </html> </html>
Check the address of this file
<script type="text/javascript" src="app.js"></script>
solution2
0 2022-07-19 23:58:37
A few recommendations:
First , to avoid clicking twice on submit button, remove an additional subscription from the submitted function.
So, basically you can remove these lines, from submitted :
const btn = document.querySelector('#sub');
btn.addEventListener("click", () => {
Second , to avoid countryvalue is not defined errors you need to declare your variables out of the submitted function scope, so the variables are visible both in submitte and in show
For example:
let countryvalue;
function submitted() {
countryvalue = document.getElementById("country").value;
}
function show() {
document.getElementById("countryt").innerHTML = countryvalue;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Why do I get an error when create a function but not when a variable?
Why I get error when I attach reference to js file?
Why do I get undefined when displaying value in a global variable?
Why do I get a reference error when assigning to a variable without the var keyword?
Why do I get an error of undefined function in chrome?
Why do I get function undefined error from html doc?
Why do I get undefined when using this function?
Why do I get an undefined error when calling a function without parameter?
Why do I get undefined JS with Laravel?
Why do I get undefined? (JS)
Related Tags