Issues with simple Javascript/HTML script

Question

I keep getting an error no mater how I change my code. I have written it a few different ways but here is one of the ways.

The error I am receiving is 'Shipment charge is not found inside the div with id 'result''

UI Constraints : The file name should be index.html. To compute shipping charge use (Total shipping charge= weight*cost). Refer sample screenshot for detailed specifications.

The code is suppose to look similar to

<!DOCTYPE html>
<html>
    <head>
         <style>
                #header {
                    border: 1px solid lightgrey;
                    margin : -8px -8px 0;
                    background-color: lightgrey;
                 }
        </style>
</head>

<body>
    <div id="header">
        <table style="width:100%">
            <tr style="width:100%">
                <td style="width:20%">
                    <span>
                        <img align="left" src="logo.jpeg" width="120px" height="120px">
                    </span>
                </td>    
                <td style="width: 60%;">
                    <span>
                        <center>
                            <h1>DATAX Shipping Company</h1>
                        </center>
                    </span>
                </td>
                <td style="width: 40%; padding-bottom: 7%;padding-left:5%;">
                    <span>
                        <a href="#" id="signup">Sign up</a>
                        <a href="#" id="login" style="padding-left:30px">Log in</a>
                    </span>
                </td>
            </tr>
        </table>

            <!-- fill code here -->
            <center>
<h3>Calculation of Shipping charge</h3>
</center>
<form>
Total Product Weight <input type="text" id="weight" /><br>
Shipping cost (per kg) <input type="text" id="cost" /><br>
<input type="button" onClick="multiplyBy()" Value="Compute" id="compute" />
</form>
The Total Shipment charge is <div id="result"></div>


<script>
    function multiplyBy()
{
        num1 = document.getElementById("weight").value;
        num2 = document.getElementById("cost").value;
        document.getElementById("result").innerText = num1 * num2;
}
</script>
</body>
</html>

The code you provide seems to be ok

IsraGab
– IsraGab

2018-07-31 20:43:14 +00:00
Commented Jul 31, 2018 at 20:43 — IsraGab
– IsraGab, Commented Jul 31, 2018 at 20:43

Community · Accepted Answer · 2020-06-20 09:12:55Z

5

You are using an input field as your result field, not a div, as the error states.

Try changing your code like so:

document.getElementById("result").value = num1 * num2;

Also, you have a trailing </p> that needs to be removed, and a <body> tag too many.

Edit

I took a closer look at your picture, and I suggest changing the <input...>to <div...> like so:

The Total Shipment charge is <div id="result"></div>

And then have the Javascript be:

document.getElementById("result").innerText = num1 * num2;

This is because it looks to me that you are given an assignment, with automatic testing, and that the test is looking for a <div> element, not an <input>.

Edit#2

I copied your updated code to CodePen.IO and the code works as written, so the question then is, are you sure the site has gotten the updated code? Also, are they testing more than just the value inside the div? Are they testing the likeness to that picture? If so, some styling and possible refactoring of the structure might be needed.

Edit#3

As per @Rainmx93 excellent comment, I've got this last thing to try:

document.getElementById("result").innerText = 'The Total Shipment charge is ' + (num1 * num2);

And changing the div from

The Total Shipment charge is <div id="result"></div>

To

<div id="result"></div>

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jul 31, 2018 at 20:41

Canis

4,4601 gold badge26 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

17 Comments

RainDev Over a year ago

Also i see opening body tag inside body

user10162549 Over a year ago

ah I used a <p> previously and tried to change it and mustve missed that one. Still cant get it work for some reason though.

user10162549 Over a year ago

i see that it had the opening body also. oops. still having issues im not sure why.

Canis Over a year ago

@user10162549 edit your question and add the most recent code as an update below the original content. Also... Where does the error come from? Some automated test online or in a VM made by a school or something?

RainDev Over a year ago

@Canis i guess he needs result exactly like in picture, so you need to put text The Total Shipment charge is inside div and then append value to this div: innerHTML += num1 * num2 but im not sure

|

Daan Seuntjens · Accepted Answer · 2018-07-31 20:59:15Z

1

I believe your fault is just because you have an error in your html:

The Total Shipment charge is <input type= "text" id="result">



</p>

should be:

<p> The Total Shipment charge is:</p>
<p id="result"> </p>

you also have a 2 body tags, remove the second one.

edited Jul 31, 2018 at 20:59

answered Jul 31, 2018 at 20:40

Daan Seuntjens

9601 gold badge21 silver badges42 bronze badges

1 Comment

user10162549 Over a year ago

ah I used a <p> previously and tried to change it and mustve missed that one. tried this and still cant get it work for some reason though.

Unmitigated · Accepted Answer · 2018-07-31 22:05:56Z

An input does not have innerHTML; it has a value.

Change

document.getElementById("result").innerHTML = num1 * num2;

To

document.getElementById("result").value = num1 * num2;

Also, you have a few syntax errors in your HTML, including having two opening body tags.

<!DOCTYPE html>
<html>
    <head>
         <style>
                #header {
                    border: 1px solid lightgrey;
                    margin : -8px -8px 0;
                    background-color: lightgrey;
                 }
        </style>
</head>

<body>
    <div id="header">
        <table style="width:100%">
            <tr style="width:100%">
                <td style="width:20%">
                    <span>
                        <img align="left" src="logo.jpeg" width="120px" height="120px">
                    </span>
                </td>    
                <td style="width: 60%;">
                    <span>
                        <center>
                            <h1>DATAX Shipping Company</h1>
                        </center>
                    </span>
                </td>
                <td style="width: 40%; padding-bottom: 7%;padding-left:5%;">
                    <span>
                        <a href="#" id="signup">Sign up</a>
                        <a href="#" id="login" style="padding-left:30px">Log in</a>
                    </span>
                </td>
            </tr>
        </table>

            <!-- fill code here -->
            <center>
<h3>Calculation of Shipping charge</h3>
</center>
<form>
Total Product Weight <input type="text" id="weight" /><br>
Shipping cost (per kg) <input type="text" id="cost" /><br>
<input type="button" onClick="multiplyBy()" Value="Compute" id="compute" />
</form>
The Total Shipment charge is <input type= "text" id="result">




<p/>
<script>
    function multiplyBy()
{
        num1 = document.getElementById("weight").value;
        num2 = document.getElementById("cost").value;
        document.getElementById("result").value = num1 * num2;
}
</script>
</body>
</html>

Instead of using an input to display the results, you should use a span, in which case you could set its innerHTML or textContent to display the computed values.

<!DOCTYPE html>
    <html>
        <head>
             <style>
                    #header {
                        border: 1px solid lightgrey;
                        margin : -8px -8px 0;
                        background-color: lightgrey;
                     }
            </style>
    </head>

    <body>
        <div id="header">
            <table style="width:100%">
                <tr style="width:100%">
                    <td style="width:20%">
                        <span>
                            <img align="left" src="logo.jpeg" width="120px" height="120px">
                        </span>
                    </td>    
                    <td style="width: 60%;">
                        <span>
                            <center>
                                <h1>DATAX Shipping Company</h1>
                            </center>
                        </span>
                    </td>
                    <td style="width: 40%; padding-bottom: 7%;padding-left:5%;">
                        <span>
                            <a href="#" id="signup">Sign up</a>
                            <a href="#" id="login" style="padding-left:30px">Log in</a>
                        </span>
                    </td>
                </tr>
            </table>

                <!-- fill code here -->
                <center>
    <h3>Calculation of Shipping charge</h3>
    </center>
    <form>
    Total Product Weight <input type="text" id="weight" /><br>
    Shipping cost (per kg) <input type="text" id="cost" /><br>
    <input type="button" onClick="multiplyBy()" Value="Compute" id="compute" />
    </form>
    <span id="result"></span>




    <p/>
    <script>
        function multiplyBy()
    {
            num1 = document.getElementById("weight").value;
            num2 = document.getElementById("cost").value;
            document.getElementById("result").textContent = "The Total Shipment charge is "+num1 * num2;
    }
    </script>
    </body>
    </html>

saucel · Accepted Answer · 2018-07-31 20:52:49Z

0

Change this:

document.getElementById("result").innerHTML = num1 * num2;

To this:

document.getElementById("result").value= num1 * num2;

Since you are putting the result in an input field, it needs to have it's value changed. If you were using a <p> or other element, then that's when you would use innerText.

edited Jul 31, 2018 at 20:52

answered Jul 31, 2018 at 20:42

saucel

966 bronze badges

2 Comments

Canis Over a year ago

Actually you would be using innerText, as innerHTML is quite dangerous as it easily opens you to XSS.

user10162549 Over a year ago

ah I used a <p> previously and tried to change it and mustve missed that one. Still cant get it work for some reason though.

Collectives™ on Stack Overflow

Issues with simple Javascript/HTML script

4 Answers 4

Edit

Edit#2

Edit#3

17 Comments

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Edit

Edit#2

Edit#3

17 Comments

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related