Function that is stored in Var and called in html. What am doing wrong? ( Javascript )-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：

Don't use document.write. Simply return a string. And execute codeFunc when assigning the result 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>

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>