Function that is stored in Var and called in html

user_19325635 0
Viewed 71

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 class="btn0" id="btn1id" onclick="GenerateButton()">Generate</div>
<div class="Txt" 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.

html javascript
3 Answers

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();
user_147124570

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 class="btn0" id="btn1id" onclick="GenerateButton()">Generate</div>
<div class="Txt" 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.

user_27434580

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 class="btn0" id="btn1id" onclick="GenerateButton()">Generate</div>
<div class="Txt" id="Txt" style="display=none;"> The Code is: <span id="code"></span></div>

user_146408310
Related