CODEWITHSUNDEEP
javascriptoperators
user10162549
user10162549

Reputation: 21

Issues with simple Javascript/HTML script

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>

Upvotes: 2

Views: 221

Answers (4)

Unmitigated
Unmitigated

Reputation: 89384

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>

Upvotes: 1

Canis
Canis

Reputation: 4430

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>

Upvotes: 5

Daan Seuntjens
Daan Seuntjens

Reputation: 960

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.

Upvotes: 1

saucel
saucel

Reputation: 96

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.

Upvotes: 0

Related Questions