Почему я получаю эту ошибку: «Неперехваченная ошибка ReferenceError: значение1 не определено»? - PullRequest
Новая
       39

Почему я получаю эту ошибку: «Неперехваченная ошибка ReferenceError: значение1 не определено»?

0 голосов
/ 11 июля 2020

Когда я запускаю свой код и нажимаю кнопку «кодировать» или кнопку «декодировать», я получаю следующую ошибку: Uncaught 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>

Всем спасибо!

Ответы [ 2 ]

0 голосов
/ 11 июля 2020

Вы не можете присвоить значения непосредственно функции в вашем 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>
0 голосов
/ 11 июля 2020

Использовать 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>
...