Doubt of HTML5

Asked

Viewed 68 times

2

Hello, I’m new to programming and was trying to create a program. The application I use to run HTML5 reported an error on line 25 and 28. On line 25 I put onclick in a form of Submit and in between quotes put the name of a function. The error on line 28 was due to the.getElementById() document. I was wondering if someone could help me?

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>Cups</title>
        <style>
            body {
                background-color: orange;
            }

            p {
                text-indent: 10%;
            }

            .a {
                text-shadow: 0px 0px 5px black;
            }
        </style>
    </head>
    <body>
        <p>Hi. This program give the number of needed cups to make a tower. The input is the number of cups in the base.</p>
        <span class="a">Input:</span>
        <label>Cups in base:</label>
        <input id="input" type="text"/><br/>
        <input id="input0" type="submit" onclick="program()"/>
        <script>
            function program() {
                int a = document.getElementById("input");
                int b = a;
                while(b > 1) {
                    b = b - 1;
                    a = a + b;
                }
            }
            document.write(a);
        </script>
    </body>
</html>
javascript html5

  • would not be document.getElementById("input").value ?

  • If you withdraw int before a and of b, play document.write(a); within the function and take the value with document.getElementById("input").value; will rotate

  • Thank you for the reply.

3 answers

0

Problems:

  • Javascript is a weakly typed language, you create a variable with var a or let a and not int a

  • Take the value of the widget when doing document.getElementById() you are taking a reference to the element not its value

  • The document.writer() should be within the function

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>Cups</title>
        <style>
            body {
                background-color: orange;
            }

            p {
                text-indent: 10%;
            }

            .a {
                text-shadow: 0px 0px 5px black;
            }
        </style>
    </head>
    <body>
        <p>Hi. This program give the number of needed cups to make a tower. The input is the number of cups in the base.</p>
        <span class="a">Input:</span>
        <label>Cups in base:</label>
        <input id="input" type="text"/><br/>
        <input id="input0" type="submit" onclick="program()"/>
        <script>
            function program() {
                let a = document.getElementById("input").value;
                var b = a;
                while(b > 1) {
                    b = b - 1;
                    a = a + b;
                }
                document.write(a);
            }
        </script>
    </body>
</html>

  • Thanks for the reply. I don’t know how I didn’t realize that the.write() document was out of Function.

0

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>Cups</title>
  <style>
    body {
      background-color: orange;
    }
    
    p {
      text-indent: 10%;
    }
    
    .a {
      text-shadow: 0px 0px 5px black;
    }
  </style>
</head>

<body>
  <p>Hi. This program give the number of needed cups to make a tower. The input is the number of cups in the base.</p>
  <span class="a">Input:</span>
  <label>Cups in base:</label>
  <input id="input" type="text" /><br/>
  <button type="button" id="input0">result</button>
  <button type="button" id="clear">Limpar</button>
  <div id="result" value="">
  </div>
  <script>
    var $button = document.querySelector("#input0");
    var $buttonClear = document.querySelector("#clear");

    $button.addEventListener('click', function() {

      let a = document.querySelector("#input").value;

      var b = a;

      while (b > 1) {

        b = b - 1;

        a = a + b;
      }

      document.querySelector('#result').innerHTML = a;

    }, false);

    $buttonClear.addEventListener('click', function() {

      document.querySelector("#result").innerHTML = '';

      document.querySelector("#input").value = '';

    }, false);
  </script>
</body>

</html>

it is good to practice avoiding js in line and using Document.write, use console.log() for debugging

0


Let’s go from the basics:

  1. If you’re learning to program, don’t use the var. Use let or const to declare a variable in Javascript. One of the biggest problems you will encounter with var is the scope rule. This is a big problem in the language and has been fixed.

  2. When declaring the variable to pull the DOM element, that is, from the input, you need to put . value, being as follows:

    Let a = Document.getElementById('input'). value

  3. I tried with Alert, but you can use innerHTML to insert an element into the DOM. Getting it this way:

    Document.getElementByID('elementName'). innerHTML = 'result'

  4. as you denounced the let a within the function, it now has a scope rule.

Final script:

<script>
        function program() {
            let a = document.getElementById('input').value
            let b = a
            while (b > 1) {
                b = b - 1
                a = a + b
            }
            alert(a)
        }

    </script>
  • 1

    Thank you for the reply.

  • 1

    The only problem I had afterwards was the system treat as a string, but I just used Let a = Number(Document.getElementById("input"). value).

  • Oh yes! You can also use this process. Called Casting!

Browser other questions tagged javascript html5

You are not signed in. Login or sign up in order to post.