Why do I get this error: "Uncaught ReferenceError: value1 is not defined"?

Question

当我运行我的代码并按下按钮 'encode' 或按钮 'decode' 时，我收到此错误：未捕获的 ReferenceError：未定义 value1 在 HTMLButtonElement.onclick (HtmlPage2.html:34)

我试图将脚本作为外部文件移动到 </body> 上方的区域，但我仍然得到相同的结果。

输入的 value1 似乎未被识别为 'name'。不应该得到它的定义吗？

很快：我不明白为什么 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>

Why do I get this error: "Uncaught ReferenceError: value1 is not defined"?

Why do I get this error: "Uncaught ReferenceError: value1 is not defined"?

javascript

undefined