Function that is stored in Var and called in html-CodePudding

Wanted to create random code, store it in variable and show it in html.

function GenerateButton() {
  document.getElementById("btn1id").style.display = "none";
  document.getElementById("Txt").style.display = "block";
  document.getElementById("code").innerHTML = GFCode;
}

function randomString(length, chars) {
  var result = '';
  for (var i = length; i > 0; --i) result  = chars[Math.round(Math.random() * (chars.length - 1))];
  return result;
}

function codeFunc() {
  document.write(randomString(4, '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ'));
  document.write("-");
  document.write(randomString(4, '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ'));
}
var GFCode = codeFunc;

<div  id="btn1id" onclick="GenerateButton()">Generate</div>
<div  id="Txt" style="display=none;"> The Code is: <span id="code"></span></div>

If i do the document.write in the html document the code is generating, but i can't get it working from the js document.

CodePudding user response：

Since you set the GFCode variable to simply the function's name, you are setting it to the function itself, not it's return value. To actually run the function and get it's return value you must write it like this:

var GFCode = codeFunc();

CodePudding user response：

Your question states: "...create random code, store it in variable and show it in html."

Don't use document.write. Simply return a string, assign it to a variable, and interpolate that variable in your HTML. To do so you'll need to execute codeFunc() which then assigns the returned random code (string) to GFCode:

function GenerateButton(){
  document.getElementById("btn1id").style.display = "none";
  document.getElementById("Txt").style.display = "block";
  document.getElementById("code").innerHTML = GFCode;
}

function randomString(length, chars) {
  var result = '';
  for (var i = length; i > 0; --i) {
    result  = chars[Math.round(Math.random() * (chars.length - 1))];
  }
  return result;
}

function codeFunc(){
  return ( // <-- return the code string
    randomString(4, '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ')
      "-" 
      randomString(4, '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ')
  );
}
var GFCode = codeFunc(); // <-- execute codeFunc

<div  id="btn1id" onclick="GenerateButton()">Generate</div>
<div  id="Txt" style="display=none;"> The Code is: <span id="code"></span></div>

If, as your title implies, you are intending to store the function in the variable, and not the random code produced by the function, you can:

...
document.getElementById("code").innerHTML = GFCode(); // <-- execute function
...
var GFCode = codeFunc; // <-- assign function to variable

Either way, the random code needs to be returned from the function, and that function needs to be executed.

CodePudding user response：

Your code is returning null since you calling the variable before it get executed.

The function codeFunc() returns a function.

I change your code here.

var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var GFCode =   `${randomString(4, chars)} - ${randomString(4, chars)}`;

function GenerateButton(){
document.getElementById("btn1id").style.display = "none";
document.getElementById("Txt").style.display = "block";
document.getElementById("code").innerHTML = GFCode;
}

function randomString(length, chars) {
var result = '';
for (var i = length; i > 0; --i) result  = chars[Math.round(Math.random() * (chars.length - 1))];
return result;
}

.btn0 {
  padding: 5px 10px;
  border: 1px solid black;
  width: 100px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}

<div  id="btn1id" onclick="GenerateButton()">Generate</div>
<div  id="Txt" style="display=none;"> The Code is: <span id="code"></span></div>