Question

当我运行代码并按下“编码”按钮或“解码”按钮时，出现此错误：未捕获的ReferenceError：未定义value1 在HTMLButtonElement.onclick（HtmlPage2.html：34）

我曾尝试将脚本作为外部文件移动到</body>上方的区域，但是我仍然得到相同的信息。

似乎在输入中未将value1识别为“名称”。那不应该定义它吗？

简短地说：我不明白为什么未定义value1。有人可以解释一下吗？

这是我的代码：

var newURL;
            function setEncode(myURL) {
                newURL = encodeURIComponent(myURL);
                alert(newURL);
                document.getElementById("info").innerHTML = newURL.toString();
            }
    
            function setDecode(myURL) {
                decodeURL = decodeURIComponent(newURL);
                alert(decodeURL);
                document.getElementById("info").innerHTML = decodeURL.toString();
            }

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
    
    
    
        <input type="text" name="value1" />
        <button name="encode" onclick="setEncode(value1.value)"> encode </button>
        <button name="decode" onclick="setDecode(value1.value)"> decode </button>
    
        <div id="info"> Decode / encode   </div>
    </body>
    </html>

谢谢大家！

Answer 1

使用id代替name属性。

var newURL;
            function setEncode(myURL) {
                newURL = encodeURIComponent(myURL);
                document.getElementById("info").innerHTML = newURL.toString();
            }
    
            function setDecode(myURL) {
                decodeURL = decodeURIComponent(newURL);
                document.getElementById("info").innerHTML = decodeURL.toString();
            }

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
    
    
    
        <input type="text" id="value1" />
        <button name="encode" onclick="setEncode(value1.value)"> encode </button>
        <button name="decode" onclick="setDecode(value1.value)"> decode </button>
    
        <div id="info"> Decode / encode   </div>
    </body>
    </html>

原因：

如果为html元素分配了ID属性，则可以在具有该变量名称的javascript中使用它。例如

myDiv.innerHTML = myDiv.innerHTML + "<p>See? What did I tell you?</p>";

<div id="myDiv">
This div ID is myDiv, can be called in JavaScript.
</div>

Answer 2

您不能将值直接分配给html中的函数。但是您可以使用选择器从输入中获取值，并将事件侦听器附加到按钮上。但是，如果要在html上执行所有这些操作，则可以这样做

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>

    <script>


        // encoding and decoding URIs

        var newURL;
        function setEncode(myURL) {
            newURL = encodeURIComponent(myURL);
            alert(newURL);
            document.getElementById("info").innerHTML = newURL.toString();
        }

        function setDecode() {
            decodeURL = decodeURIComponent(newURL);
            alert(decodeURL);
            document.getElementById("info").innerHTML = decodeURL.toString();
        }




    </script>
</head>
<body>



    <input type="text" id="value1" />
    <button name="encode" onclick="javascript:(function (){let v=document.getElementById('value1');setEncode(v.value)})()"> encode </button>
    <button name="decode" onclick="javascript:(function (){let v=document.getElementById('value1');setEncode(v.value)})()"> decode </button>

    <div id="info"> Decode / encode   </div>
</body>
</html>

为什么会出现此错误：“未捕获的ReferenceError：未定义value1”？

2 个答案: