在 Javascript 小书签中动态生成整个页面

Question

我正在小书签内生成此页面。（原因...）

我收到这个错误：

Uncaught TypeError: Cannot read property 'value' of 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：创建文档和正文，然后附加到正文

Answer 1

您的问题在于如何设置 onclick 处理程序。看到这些行：

generateButton.onclick = genRan();
...
minusButton.onclick = decreaseCounter();
...
plusButton.onclick = increaseCounter();

此处您实际上是在调用函数，并将它们的 return 值设置为 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 小书签中动态生成整个页面

Dynamically generating an entire page in a Javascript bookmarklet

javascript

dom

dynamic

更正后的代码：