Question

我在书签中生成此页面。（原因......）

我收到此错误：

第10行

Uncaught TypeError: Cannot read property 'value' of null

（var inputValue = document.getElementById('input').value;）＆lt;第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();

在这里，您实际调用函数，并将其返回值设置为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书签中动态生成整个页面

1 个答案:

更正代码：