在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