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

Question

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

我收到此错误：

Uncaught TypeError: Cannot read property 'value' of null在第10行Uncaught TypeError: Cannot read property 'value' of null

（ 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();

在这里，您实际上是在调用函数，并将它们的返回值设置为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 个解决方案

解决方案1
2 已采纳 2015-02-22 21:13:15

更正的代码：

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

问题描述

1 个解决方案

解决方案1 2 已采纳 2015-02-22 21:13:15

更正的代码：

解决方案1
2 已采纳 2015-02-22 21:13:15