问简单Javascript/HTML脚本的问题
EN

Stack Overflow用户

提问于 2018-08-01 04:33:56

回答 4查看 203关注 0票数 2

不管我怎么修改代码，我总是收到一个错误。我已经写了几种不同的方式，但这里是一种方式。

我收到的错误是‘在id为’result‘的div中找不到发货费用’‘

UI约束:文件名应为index.html。计算运费使用(总运费charge=重量*成本)。有关详细规格，请参阅示例截图。

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

javascript

operators

回答 4

Stack Overflow用户

发布于 2018-08-01 04:41:47

您正在使用一个输入字段作为结果字段，而不是像错误所说的那样使用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>。

Edit#2

我把你更新的代码复制到了CodePen.IO，代码就像写的一样，所以问题是，你确定网站已经得到了更新的代码吗？另外，他们测试的不仅仅是div中的值吗？他们是不是在测试和那张照片的相似度？如果是这样的话，可能需要对结构进行一些样式和可能的重构。

Edit#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>

票数 5

Stack Overflow用户

发布于 2018-08-01 04:40:12

我相信你的错误只是因为你的html中有一个错误：

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



</p>

应该是：

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

你也有2个body标签，去掉第二个。

票数 1

Stack Overflow用户

发布于 2018-08-01 04:51:38

input没有innerHTML；它有一个value。

变化

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

至

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

此外，您的超文本标记语言中还存在一些语法错误，包括具有两个开始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>

您应该使用span，而不是使用input来显示结果，在这种情况下，您可以设置其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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/51621664

复制

相似问题

问简单Javascript/HTML脚本的问题
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问简单Javascript/HTML脚本的问题EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问简单Javascript/HTML脚本的问题
EN