我在小书签内生成此页面。 （出于原因...）
我收到此错误：
第10行上的Uncaught TypeError: Cannot read property 'value' of null
（var inputValue = document.getElementById('input').value;）
目前，我只是将所有代码复制并粘贴到DOM中以模拟小书签。
我宁愿使用纯Javascript，也不要使用Jquery。
这是我的代码：
javascript:(function(){
function genRan(){
/*
Generate a random value of length determined by box 'input'
Please note that this cannot be used for any type of cryptography however it
is fine for password generation. Do not use for public key crypto!
*/
/* Get the value from input field */
var inputValue = document.getElementById('input').value;
inputValue = parseInt(inputValue);
var outputValue = '';
var possibleValues = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
/* Generate the random string */
for(var x=0; x<inputValue; x++){
var randomInt = Math.floor((Math.random() * possibleValues.length) + 1);
console.log(randomInt);
outputValue += possibleValues.charAt(randomInt);
}
document.getElementById('output').value = outputValue;
}
function decreaseCounter(){
var inputValue = document.getElementById('input').value;
inputValue = parseInt(inputValue);
inputValue--;
document.getElementById('input').value = inputValue;
genRan();
}
function increaseCounter(){
var inputValue = document.getElementById('input').value;
inputValue = parseInt(inputValue);
inputValue++;
document.getElementById('input').value = inputValue;
genRan();
}
/* EDIT 2: Make a document with body */
document.open();
document.write('<html><head></head><body>Test</body></html>');
/* document.close(); /* Not sure if this is needed right now */
var mainDiv = document.createElement('div');
mainDiv.id = 'mainDiv';
var innerDiv = document.createElement('div');
innerDiv.id = 'innerDiv';
/* EDIT: based on Dan's comment, I have added the following */
mainDiv.appendChild(innerDiv);
document.body.appendChild(mainDiv);
/* End of edit */
var generateButton = document.createElement("button");
var generateButtonText = document.createTextNode("Generate Random String");
generateButton.appendChild(generateButtonText);
generateButton.onclick = genRan();
innerDiv.appendChild(generateButton);
var minusButton = document.createElement("button");
minusButtonText = document.createTextNode("-");
minusButton.appendChild(minusButtonText);
minusButton.onclick = decreaseCounter();
innerDiv.appendChild(minusButton);
var plusButton = document.createElement("button");
plusButtonText = document.createTextNode("+");
plusButton.appendChild(plusButtonText);
plusButton.onclick = increaseCounter();
innerDiv.appendChild(plusButton);
var textInput = document.createElement("input");
textInput.setAttribute("id", "input");
textInput.setAttribute("type", "text");
textInput.setAttribute("value", "10");
innerDiv.appendChild(textInput);
var textOutput = document.createElement("input");
textOutput.setAttribute("id", "output");
textOutput.setAttribute("type", "text");
innerDiv.appendChild(textOutput);
genRan();/* Begin the program now */
})();
编辑：
编辑1：
将div附加到内部和主要div的输入
编辑2：
创建文档和正文，然后附加到正文
最佳答案
您的问题在于如何设置onclick处理程序。看到这些行：
generateButton.onclick = genRan();
...
minusButton.onclick = decreaseCounter();
...
plusButton.onclick = increaseCounter();
在这里，您实际上是在调用函数，并将其返回值设置为
onclick属性，而不是将函数设置为回调。这导致函数在创建元素之前运行，从而导致错误。用这些替换这些行，您的代码将起作用。
generateButton.onclick = genRan;
...
minusButton.onclick = decreaseCounter;
...
plusButton.onclick = increaseCounter;
更正的代码：
javascript:(function(){
function genRan(){
/*
Generate a random value of length determined by box 'input'
Please note that this cannot be used for any type of cryptography however it
is fine for password generation. Do not use for public key crypto!
*/
/* Get the value from input field */
var inputValue = document.getElementById('input').value;
inputValue = parseInt(inputValue);
var outputValue = '';
var possibleValues = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
/* Generate the random string */
for(var x=0; x<inputValue; x++){
var randomInt = Math.floor((Math.random() * possibleValues.length) + 1);
console.log(randomInt);
outputValue += possibleValues.charAt(randomInt);
}
document.getElementById('output').value = outputValue;
}
function decreaseCounter(){
var inputValue = document.getElementById('input').value;
inputValue = parseInt(inputValue);
inputValue--;
document.getElementById('input').value = inputValue;
genRan();
}
function increaseCounter(){
var inputValue = document.getElementById('input').value;
inputValue = parseInt(inputValue);
inputValue++;
document.getElementById('input').value = inputValue;
genRan();
}
/* EDIT 2: Make a document with body */
document.open();
document.write('<html><head></head><body>Test</body></html>');
/* document.close(); /* Not sure if this is needed right now */
var mainDiv = document.createElement('div');
mainDiv.id = 'mainDiv';
var innerDiv = document.createElement('div');
innerDiv.id = 'innerDiv';
/* EDIT: based on Dan's comment, I have added the following */
mainDiv.appendChild(innerDiv);
document.body.appendChild(mainDiv);
/* End of edit */
var generateButton = document.createElement("button");
var generateButtonText = document.createTextNode("Generate Random String");
generateButton.appendChild(generateButtonText);
generateButton.onclick = genRan;
innerDiv.appendChild(generateButton);
var minusButton = document.createElement("button");
minusButtonText = document.createTextNode("-");
minusButton.appendChild(minusButtonText);
minusButton.onclick = decreaseCounter;
innerDiv.appendChild(minusButton);
var plusButton = document.createElement("button");
plusButtonText = document.createTextNode("+");
plusButton.appendChild(plusButtonText);
plusButton.onclick = increaseCounter;
innerDiv.appendChild(plusButton);
var textInput = document.createElement("input");
textInput.setAttribute("id", "input");
textInput.setAttribute("type", "text");
textInput.setAttribute("value", "10");
innerDiv.appendChild(textInput);
var textOutput = document.createElement("input");
textOutput.setAttribute("id", "output");
textOutput.setAttribute("type", "text");
innerDiv.appendChild(textOutput);
genRan();/* Begin the program now */
})();