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.
2 Answers 2
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>Comments
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
Comments
Explore related questions
See similar questions with these tags.
saltgen()instead of the value:document.getElementById("num").valuewill return the value of the input. Also you should usetextContentinstead ofinnerHTMLunless you specifically need the new value parsed as HTML.document.getElementById("num").value