Can someone advise me on how to ensure my function effectively delivers a desired outcome?

Question

Can someone advise me on how to ensure my function effectively delivers a desired outcome?

My goal is to learn Javascript on my own, but I'm struggling to make progress. I've created a function called fixedSpending() that takes two inputs, num1 and num2, and adds them together. However, when the user hits the "=" button, I expect the function to return the total. Unfortunately, this isn't happening as I keep encountering an uncaught reference error in the console stating that fixedSpending() is not defined. I'm confused as to why this error is occurring.

I would greatly appreciate any assistance or resources for learning more about this topic.

 <html>
    
    <head>
      <title>
        Budget Form
        <script type="text/javascript">
        function fixedSpending(){
          var num1=parseFloat(document.getElementById("num1").value)
          var num2=parseFloat(document.getElementById("num2").value)
    
          return document.getElementById('result').value= num1 + num2;
        } 
        </script>
      </title>
    
    </head>
    <body>
      <h2></h2>
      <br>
      num1:&nbsp;<input type="text" id="num1" maxlength="10"><br>
      num2:&nbsp;<input type="text" id="num2" maxlength="10"><br>
      <input type="Button" value= "=" onclick="fixedSpending();"><br>
      Result: <input type="text" id="result">
    </body>
</html>

The error message reads: Uncaught ReferenceError: fixedSpending is not defined

javascript

Answer 1

Answer №1

It appears that there is an issue with your HTML code. The <script> tag should not be placed inside the <title> tag. To resolve this, you just need to move the <script> tag outside of the <title> tag. Here is the corrected code:

<html>
    <head>
        <title>Budget Form</title>
        <script type="text/javascript">
            function fixedSpending(){
                var num1 = parseFloat(document.getElementById("num1").value);
                var num2 = parseFloat(document.getElementById("num2").value);

                return document.getElementById('result').value = num1 + num2;
            }
        </script>
    </head>
    <body>
        <h2></h2>
        <br>
        num1: &nbsp;<input type="text" id="num1" maxlength="10"><br>
        num2: &nbsp;<input type="text" id="num2" maxlength="10"><br>
        <input type="Button" value="=" onclick="fixedSpending();"><br>
        Result: <input type="text" id="result">
    </body>
</html>

Answer 2

It appears that there is an issue with your HTML code. The <script> tag should not be placed inside the <title> tag. To resolve this, you just need to move the <script> tag outside of the <title> tag. Here is the corrected code:

<html>
    <head>
        <title>Budget Form</title>
        <script type="text/javascript">
            function fixedSpending(){
                var num1 = parseFloat(document.getElementById("num1").value);
                var num2 = parseFloat(document.getElementById("num2").value);

                return document.getElementById('result').value = num1 + num2;
            }
        </script>
    </head>
    <body>
        <h2></h2>
        <br>
        num1: &nbsp;<input type="text" id="num1" maxlength="10"><br>
        num2: &nbsp;<input type="text" id="num2" maxlength="10"><br>
        <input type="Button" value="=" onclick="fixedSpending();"><br>
        Result: <input type="text" id="result">
    </body>
</html>

Answer 3

Answer №2

To start, take the script out of the title tag as it is currently nested inside.

Next, relocate the script to right above the closing body tag. This ensures that the form fields are fully rendered before any manipulation or data usage takes place, following common practice.

Lastly, eliminate the term "return" from your function. The function does not require a specific return value since it only needs to set the result field's value. Simply remove "return" from the final line of your function.

Answer 4

To start, take the script out of the title tag as it is currently nested inside.

Next, relocate the script to right above the closing body tag. This ensures that the form fields are fully rendered before any manipulation or data usage takes place, following common practice.

Lastly, eliminate the term "return" from your function. The function does not require a specific return value since it only needs to set the result field's value. Simply remove "return" from the final line of your function.

Answer 5

Answer №3

According to @Bjarke's observation, it seems that your script is not properly embedded within the HTML document. To rectify this issue, make sure to place the script just above the closing </body> tag. Additionally, there is no need to use the return statement as you are simply assigning a value to an input field. You can try the following corrected code:

<html>
  <head>
    <title>
      Budget Form
    </title>
  </head>
  <body>
    <h2></h2>
    <br>
    num1:&nbsp;<input type="text" id="num1" maxlength="10"><br>
    num2:&nbsp;<input type="text" id="num2" maxlength="10"><br>
    <input type="button" value= "=" onclick="fixedSpending();"><br>
    Result: <input type="text" id="result">
    <script>
        function fixedSpending() {
            var num1 = parseFloat(document.getElementById("num1").value)
            var num2 = parseFloat(document.getElementById("num2").value)
            document.getElementById('result').value = num1 + num2;
        };
    </script>
  </body>
</html>

Feel free to test this adjusted code on jsfiddle: https://jsfiddle.net/mzvnfow2/2/

Answer 6

According to @Bjarke's observation, it seems that your script is not properly embedded within the HTML document. To rectify this issue, make sure to place the script just above the closing </body> tag. Additionally, there is no need to use the return statement as you are simply assigning a value to an input field. You can try the following corrected code:

<html>
  <head>
    <title>
      Budget Form
    </title>
  </head>
  <body>
    <h2></h2>
    <br>
    num1:&nbsp;<input type="text" id="num1" maxlength="10"><br>
    num2:&nbsp;<input type="text" id="num2" maxlength="10"><br>
    <input type="button" value= "=" onclick="fixedSpending();"><br>
    Result: <input type="text" id="result">
    <script>
        function fixedSpending() {
            var num1 = parseFloat(document.getElementById("num1").value)
            var num2 = parseFloat(document.getElementById("num2").value)
            document.getElementById('result').value = num1 + num2;
        };
    </script>
  </body>
</html>

Feel free to test this adjusted code on jsfiddle: https://jsfiddle.net/mzvnfow2/2/

Can someone advise me on how to ensure my function effectively delivers a desired outcome?

Answer №1

Answer №2

Answer №3

Similar questions

Add a new component in front of another component based on its attribute value

Different ways to notify a React/Next.js page that Dark Mode has been switched?

I keep encountering an error that says "ReferenceError: localStorage is not defined" even though I have already included the "use

The Kenburn zoom image effect fails to function

Exploring the art of reading and writing to a file with JavaScript and NodeJS

Implementing async and await after making a fetch request

Invoke the session on a different page and incorporate it into your JavaScript code

How does the 'this' variable function when it comes to models in embedded documents?

Having trouble getting the jQuery autocomplete feature to function properly?

What steps can I take to set a strict boundary for displaying the address closer to the current location?

What advantages come from destructuring in conjunction with require statements?

Watching a Computed Value in EmberJS

Every time I attempt to insert a background image into a div using jQuery, I am consistently faced with a 404 error message

How to resolve the error of "Cannot GET /api/courses/1"

React JS makes it simple to create user-friendly cards that are optimized

Neglecting to review the CSS - embracing ejs layouts in Express

What is the best way to showcase images using Vue.js?

Selecting JavaScript file on change as default option

Duplicate key error occurred in the collection resulting in Error Handling: E11000

Checking for the accuracy of the provided full name