我正在小书签内生成此页面。 (由于原因......)
我收到此错误:
未捕获类型错误:无法读取 null 的属性“值” 第 10 行
(var inputValue = document.getElementById('input').value;) <第 10 行
目前，我只是将所有代码复制并粘贴到 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 */
})();
关于javascript - 在 Javascript 书签中动态生成整个页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28600431/