HTML5 question [closed]

Question

HTML5 question [closed]

Navigation

#1 by (0 votes)
#2 by (0 votes)
#3 by (0 votes)

2

Hello, I'm new to programming and trying to create a program. The application I use to run HTML5 reported an error on line 25 and line 28. On line 25 I placed onclick on a form of submit and entered the quotes I put the name of a function. The error on line 28 was because of the document.getElementById (). I wonder if anyone 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

asked by anonymous 03.05.2018 / 02:09

3 answers

0

Problems:

JavaScript is a weakly typed language, you create a variable with var a or let a and not int a
The document.getElementById() must 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>

03.05.2018 / 02:32

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's good to practice avoiding inline js and using document.write, use console.log () for debugging

03.05.2018 / 02:42

Query to get errors and hits from a student When to carry out e2e tests in your application?

score 0 · Accepted Answer

Let's get down to basics:

If you are learning to program, do not use var anymore. Use let or const to declare a Javascript variable. One of the biggest problems you'll encounter with var is the scope rule. This is a major language problem and has already been fixed.

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

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

I've tried with the alert, but you can use innerHTML to insert an element into the DOM. It looks like this:

document.getElementByID ('object_name'). innerHTML = 'result'

As you have delighted 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>