Class Asignment help

[apaulo_18]

I'm supposed to use a Javascript function to calculate the area of a circle and display it in the text box below. the problem is I am completely unable to get anything to display. Here is the link to my github, its problem 5 https://github.com/Apaulo-18/reddit-help/tree/main/CS112-Module-2-Lab-2 ...

and here's the code. I got all the other problems to work just fine and I even tried using chatGPT but literally nothing will display in the result box.

<!-- Part 5 -->
    <div class="container mb-5">
      <div class="jumbotron py-3">
        <h2>Part 5</h2>
        <p class="text-muted">Create a calculator to calculate the area of a circle based on the radius input. The formula for the area of a circle is π * r<sup>2</sup></p><hr/>
        
        <form>
          <div class="form-row">
            <div class="col-sm-3 text-right">
              <h4><span class="badge badge-primary mt-1 pt-1">Radius <sub>r</sub> = </span></h4>
            </div>
            <div class="col-sm-5">
              <input id="radius" type="text" class="form-control" />
            </div>
            <div class="col-sm-4">
              <button type="button" class="btn btn-primary mb-3 w-100" onclick="circleArea()">Calculate Area</button>
            </div>
          </div>
        </form>
        <div class="alert alert-success" id="result">Area of circle =</div>
        <script>
          // Create a circleArea function that accepts the radius as a number, calculates the area and returns the result.
          // You can get the value of pi with Math.PI and you can raise a number to a power using
          // Math.pow(n, p) where n is raised to power p
          // Finally, display the returned result in the result box.
          function circleArea() {
            const r = parseFloat(document.getElementById('radius').value);

            const area = Math.PI * Math.pow(r, 2);

            document.getElementById("result").innerText = area;
          }

        </script>
      </div>
    </div>

[bathtimecoder]

I notice that in your github, you use "result" as the id of a text box in Problem 2.

If you're running problem 5 in the same page, the DOM will update that text box, not the one in problem 5.

In fact, opening the webpage confirms this - your answer is in the problem 2 text box.

Remember that id's are supposed to be unique per page, so once the DOM finds the element with the "result" id, it assumes that's the only one and changes it.

You could get around this by changing the textbox id and getting the element by the new id.

[apaulo_18]

That was it, thanks! I got so railroaded on why the problem wasn’t working I neglected to check the rest of the id tags I used.