Не выводится второй ответ в JavaScript

Question

Я ввожу 2 координаты X и Z. И в ответ должно выводится 2 ответа.

1 ответ — Сумма к числу 600. 2 ответ - Разность от числа 600.

У меня вводится только один ответ, и то второму скрипту, не первый.

https://www.w3schools.com/code/tryit.asp?filename=GMFS5UGR7FWC

<!DOCTYPE html>
<html>
<body>
<script>

var x, y, c;
        var outputText;

        function validate() {

            // get the input
            x = document.forms["input_form"]["aterm1"].value;
            y = document.forms["input_form"]["aterm2"].value;
            // validate a, b and c
            if (x == 0) {} else {
                // calculate 
                var a1 = x;
                var a2 = y;
                var a3 = 600;
                var a4 = (a1 +++ a3);
                var a5 = (a2 +++ a3);
                outputText = "<h>" + a4 + ", " + a5 + "</h> ";
            }

            // output the result (or errors)
            document.getElementById("1").innerHTML = outputText;
            
        }
</script>
<script>

var x, y, c;
        var outputText;

        function validate() {

            // get the input
            x = document.forms["input_form"]["aterm1"].value;
            y = document.forms["input_form"]["aterm2"].value;
            // validate a, b and c
            if (x == 0) {} else {
                // calculate 
                var a1 = x;
                var a2 = y;
                var a3 = 600;
                var a4 = (a1 --- a3);
                var a5 = (a2 --- a3);
                outputText = "<h>" + a4 + ", " + a5 + "</h> ";
            }

            // output the result (or errors)
            document.getElementById("2").innerHTML = outputText;
            
        }
</script>

   <h type="x">X</h>
    <h type="z">Z</h>
    <form name="input_form" action="javascript:validate();">
        <input type="text1" name="aterm1" size="5" required>
        <input type="text2" name="aterm2" size="5" required>
        <input type="submit" value="Готово">
    </form>

    <p type="ygol1" id="1">Первый угол</p> 
    <p type="ygol2" id="2">Второй угол</p>

    </div>
</body>
</html>

Answer 1

Области видимости! У вас сейчас все находится в глобальной области видимости и поэтому возникает конфликт имен. Если не хотите по разному переименововать все элементы можно скрипты обернуть в самовызывающиеся функции.

<script>
  (function(){
    ....Ваш код....
  })();
</script>

И второй скрипт

<script>
  (function(){
    ....Ваш код....
  })();
</script>

Таким образом область видимости будет для каждого скрипта своя и конфликтов имен больше не будет.

БЛОГ НА HUSL

Не выводится второй ответ в JavaScript

Ответы (1 шт):