CODEWITHSUNDEEP
javascripthtmlgoogle-chrome-extension
Dante
Dante

Reputation: 57

Why doesn't document.getElementById not work?

As the title suggest, somehow document.getElementById doesn't seem to retrieve the elements in the line:document.getElementById("text").innerHTML = saltgen(document.getElementById("num"));

For context, I have unpacked the code into the Chrome extension. Here is Code:

document.getElementById("click").onclick = function() {myFunction()};

function myFunction() {
  document.getElementById("text").innerHTML = saltgen(document.getElementById("num"));
}

function saltgen(length) {
  var salt = "";
  var symbols = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
  var slength = symbols.length;
  for (var i = 0; i < length; i++) {
    salt = salt + symbols.charAt(Math.floor(Math.random() * slength));
  }
  return salt;
}
<html>
<br>
<h1>Set the number of characters</h1>
<input id="num" type="number" value="20"><br><br>
<button id="click">Generate</button>
<p id="text">Salt goes here</p>

<script src="jquery-3.5.1.min.js"></script>
<script src="salt_genj.js"></script>

</html>

The error I used to have is "getElementById is not defined" at the line document.getElementById("text").innerHTML = saltgen(document.getElementById("num")); " but after I have reloaded the error somehow doesn't show up, but when the button is clicked, the text "Salt goes here" simply disappears instead of being replaced with the result of the function defined in the javascript file.

Upvotes: 0

Views: 99

Answers (2)

pilchard
pilchard

Reputation: 12919

You are passing the retrieved element to saltgen() instead of the value.

You can retrieve the value from the element by accessing its value property: document.getElementById("num").value will return the value of the input.

Also, unless you specifically need the new value parsed as HTML, you should use textContent instead of innerHTML to set the new text.

document.getElementById("click").onclick = function() {myFunction()};

function myFunction() {
  document.getElementById("text").textContent = saltgen(document.getElementById("num").value); // Access 'value' property
}

function saltgen(length) {
  var salt = "";
  var symbols = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
  var slength = symbols.length;
  for (var i = 0; i < length; i++) {
    salt = salt + symbols.charAt(Math.floor(Math.random() * slength));
  }
  return salt;
}
<html>
<br>
<h1>Set the number of characters</h1>
<input id="num" type="number" value="20"><br><br>
<button id="click">Generate</button>
<p id="text">Salt goes here</p>

<script src="jquery-3.5.1.min.js"></script>
<script src="salt_genj.js"></script>

</html>

Upvotes: 1

Amokrane Belloui
Amokrane Belloui

Reputation: 1

You can use debugging, or console output, to see whats wrong

function myFunction(){ 
    let num = document.getElementById("num");
    let salt = saltgen(num);
    console.info("num", num, "salt", salt)
    document.getElementById("text").innerHTML = salt;
 }

'num' is not the number but the element

Upvotes: 0

Related Questions