Question

无论如何更改代码，我都会不断遇到错误。我用几种不同的方式写过，但这是其中一种。

我收到的错误是“在ID为'result'的div内找不到运费”

UI约束：文件名应为index.html。要计算运费，请使用（总运费=重量*费用）。有关详细规格，请参阅示例屏幕截图。

<!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>

Answer 1

由于错误状态，您将输入字段用作结果字段，而不是div。

尝试像这样更改代码：

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

此外，您需要删除尾随</p>，并且<body>标签过多。

编辑

我仔细看了看你的照片，建议将<input...>更改为<div...>，如下所示：

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

然后将Javascript设为：

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

这是因为在我看来，您已经获得了自动测试的任务，并且测试正在寻找<div>元素，而不是<input>。

编辑＃2

我将更新后的代码复制到CodePen.IO，并且该代码按编写的方式工作，所以问题是，您确定站点已获取更新后的代码吗？另外，他们测试的不仅仅是div内的值吗？他们是否正在测试与该图片的相似性？如果是这样，可能需要对该结构进行一些样式设计和可能的重构。

编辑＃3

根据@ Rainmx93的出色评论，我要尝试这最后一件事：

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

然后从

更改div

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

收件人

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

Answer 2

我相信您的错只是因为您的html错误：

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



</p>

应为：

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

您还有2个身体标签，请删除第二个。

Answer 3

input没有innerHTML；它有一个value。

更改

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

收件人

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

此外，您的HTML中存在一些语法错误，其中包括两个打开的body标签。

<!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>

应该使用input而不是使用span来显示结果，在这种情况下，可以设置其innerHTML或textContent来显示计算值

<!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>

Answer 4

更改此：

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

对此：

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

由于将结果放入输入字段中，因此需要更改其值。如果您使用的是<p>或其他元素，那么您将使用innerText。

简单的Javascript / HTML脚本的问题

4 个答案:

编辑

编辑＃2

编辑＃3