Sharing a variable between HTML JavaScript functions
Question
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <script type="text/javascript"> function wordRand(){ var words = ["DOG", "CAT", "MOUSE", "GIRAFFE"]; return words[Math.floor(Math.random()*words.length)]; } function replaceAt(str,index,chr){ if(index > str.length-1) return str; return str.substring(0,index) + chr + str.substring(index+1); } function wordSet(){ var i, word=wordRand(); document.getElementById("text").innerHTML += word.charAt(0); //places the first letter. for(i=1;i<word.length;i++) document.getElementById("text").innerHTML += '-'; document.getElementById("checkword").innerHTML = word; //my current solution. } function check(letter){ //variable "word" receives the string from the paragraph with ID "checkword". var exists=false, i, word=document.getElementById("checkword").innerHTML, correct; for(i=1;i<word.length;i++){ if(word.charAt(i)==letter){ exists=true; correct = document.getElementById("text").innerHTML; correct = replaceAt(correct, i, letter); document.getElementById("text").innerHTML = correct; } } if(exists==false) document.getElementById("verify").innerHTML += "No "; } </script> </head> <body onload="wordSet();"> <p id="text"></p> <p id="verify">Mistakes: </p> <div id="keyboard"> <button onclick="check('Q');">Q</button> <button onclick="check('W');">W</button> <button onclick="check('E');">E</button> <button onclick="check('R');">R</button> <button onclick="check('T');">T</button> <button onclick="check('Y');">Y</button> <button onclick="check('U');">U</button> <button onclick="check('I');">I</button> <button onclick="check('O');">O</button> <button onclick="check('P');">P</button> <button onclick="check('A');">A</button> <button onclick="check('S');">S</button> <button onclick="check('D');">D</button> <button onclick="check('F');">F</button> <button onclick="check('G');">G</button> <button onclick="check('H');">H</button> <button onclick="check('J');">J</button> <button onclick="check('K');">K</button> <button onclick="check('L');">L</button> <button onclick="check('Z');">Z</button> <button onclick="check('X');">X</button> <button onclick="check('C');">C</button> <button onclick="check('V');">V</button> <button onclick="check('B');">B</button> <button onclick="check('N');">N</button> <button onclick="check('M');">M</button> </div> <!--word saver, for functions (which I want to get rid of)--> <p id="checkword" style="visibility:hidden;"></p> </body> </html>
I'll start off by saying that I apologize if this question is extremely basic and probably has been already answered, but I can't seem to find a proper response to it:
I am in the process of creating the code for an HTML page, with a bit of JavaScript included. However, I have a problem with a variable: my only way to pass it is by first inserting its content in an element inside the body, and then copying it in the other function's variable, as follows:
function parolaSet(){
var i;
var parola=parolaRand();
document.getElementById("testo").innerHTML += parola.charAt(0);
for(i=1;i<parola.length;i++)
document.getElementById("testo").innerHTML += '-';
document.getElementById("verifica").innerHTML = parola;
}
function check(lettera){
var present=false, i, parola=document.getElementById("verifica").innerHTML, giusto;}
Where "verifica" is a "p" element. I did think about using the simple "return parola;" command in the parolaSet function, however, this function sets a word in the HTML page that can't be changed by any means, as it's a requirement for my project to work. Making the call everytime I need a returned value from it would reset the word and mess everything up. So, is there another way to share this value without having to use up space in the page, repeating the parolaSet function's code and just by using common JavaScript functions and commands? If JavaScript on its own is not enough for this, I would like to acknowledge other options anyway.
PS Creating a global variable doesn't seem to work, as the value is returned as an "Object object" when used in the page or inside of functions.
EDIT: Due to absolutely reasonable suggestions, I added a snippet of my page. It's all just a basic hangman game, the words in the original code are much more, but this is the most minimal I could make it.
2 answers
solution1
0 2021-10-30 11:04:33
Try a hidden input field to pass the value along with every web request.
Somthing like:
<input hidden id="MyValueToPass" value="parola">
solution2
0 2021-10-30 11:48:38
Have a look at this
I delegate the click and have word as a global
let word; function wordRand() { var words = ["DOG", "CAT", "MOUSE", "GIRAFFE"]; return words[Math.floor(Math.random() * words.length)]; } function replaceAt(str, index, chr) { if (index > str.length - 1) return str; return str.substring(0, index) + chr + str.substring(index + 1); } function wordSet() { word = wordRand(); // set the global word document.getElementById("text").innerHTML = word.charAt(0) + word.slice(1).replace(/./g,"-") } function check(letter) { //variable "word" receives the string from the paragraph with ID "checkword". var exists = false, i, correct; for (i = 1; i < word.length; i++) { if (word.charAt(i) == letter) { exists = true; correct = document.getElementById("text").innerHTML; correct = replaceAt(correct, i, letter); document.getElementById("text").innerHTML = correct; } } if (exists == false) document.getElementById("verify").innerHTML += "No "; } window.addEventListener("load", function() { document.getElementById("keyboard").addEventListener("click", function(e) { const tgt = e.target.closest("button"); if (tgt) check(tgt.textContent) }) wordSet(); });
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> </head> <body> <p id="text"></p> <p id="verify">Mistakes: </p> <div id="keyboard"> <button>Q</button> <button>W</button> <button>E</button> <button>R</button> <button>T</button> <button>Y</button> <button>U</button> <button>I</button> <button>O</button> <button>P</button> <button>A</button> <button>S</button> <button>D</button> <button>F</button> <button>G</button> <button>H</button> <button>J</button> <button>K</button> <button>L</button> <button>Z</button> <button>X</button> <button>C</button> <button>V</button> <button>B</button> <button>N</button> <button>M</button> </div> <!--word saver, for functions (which I want to get rid of)--> <p id="checkword" style="visibility:hidden;"></p> </body> </html>
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.