当前位置： 文江博客话题详情

表中的 HTML 输入不响应 onkeyup

发布于 2024-10-14 09:32:38 字数 9566 浏览 2 评论 0原文

这是初始化我的表的代码：

<table cellspacing="0">
        <caption id="title4">
            Sprinkles (5 - 6 oz.)
                    </caption>
        <thead>
            <tr>
                <th>&nbsp;</th>
                                    <td >Price</td>
                                    <td >Quantity</td>
                            </tr>
        </thead>
        <tbody>
                        <tr class="statement4">
                <th><label>Lemon</label></th>
                                <td title="Yes" >
                    <label>$6.50</label>
                </td>
                                <td title="No" >
                    <input id="s1" name="s1" class="field text small" type="text" value="0"/>
                </td>
                            <tr class="statement4">
                <th><label>Sweet Apple</label></th>
                                <td title="Yes" >
                    <label>$6.50</label>
                </td>
                                <td title="No" >
                    <input id="s2" name="s2" class="field text small" type="text" value="0"/>
                </td>

                <tr class="statement4">
                <th><label>Sweet Caramel</label></th>
                                <td title="Yes" >
                    <label>$6.50</label>
                </td>
                                <td title="No" >
                    <input id="s3" name="s3" class="field text small" type="text" value="0"/>
                </td>

                <tr class="statement4">
                <th><label>Sweet Cinnamon</label></th>
                                <td title="Yes" >
                    <label>$6.50</label>
                </td>
                                <td title="No" >
                    <input id="s4" name="s4" class="field text small" type="text" value="0"/>
                </td>

                <tr class="statement4">
                <th><label>Sweet Mocha</label></th>
                                <td title="Yes" >
                    <label>$6.50</label>
                </td>
                                <td title="No" >
                    <input id="s5" name="s5" class="field text small" type="text" value="0"/>
                </td>
                        </tr>
                    </tbody>
    </table>

这是我的 javascript：

<script type="text/javascript">
var total = 0.0;
var all=new Array();
for(var i = 0; i < 49; i++)
    all[i] = 0;

//....I OMMITTED CODE HERE FOR THE REST OF THE onkeyup FUNCTIONS
document.getElementById("s1").onkeyup = function() {
    if(this.value != "") {
        all[44] = (parseInt(this.value,10) * 6.50);
    }
    else {
        all[44] = 0;
    }
    updateIt();
};

document.getElementById("s2").onkeyup = function() {
    if(this.value != "") {
        all[45] = (parseInt(this.value,10) * 6.50);
    }
    else {
        all[45] = 0;
    }
    updateIt();
};

document.getElementById("s3").onkeyup = function() {
    if(this.value != "") {
        all[46] = (parseInt(this.value,10) * 6.50);
    }
    else {
        all[46] = 0;
    }
    updateIt();
};
document.getElementById("s4").onkeyup = function() {
    if(this.value != "") {
        all[47] = (parseInt(this.value,10) * 6.50);
    }
    else {
        all[47] = 0;
    }
    updateIt();
};

document.getElementById("s5").onkeyup = function() {
    document.getElementById("mySpan").innerHTML = "WOAH";

    if(this.value != "") {
        all[48] = (parseInt(this.value,10) * 6.50);
    }
    else {
        all[48] = 0;
    }
    updateIt();
};

function updateIt() {
    var theTotal = 0;
    for(var j = 0; j < 49; j++)
        theTotal += all[j];

    theTotal = all[48];
    document.getElementById("mySpan").innerHTML = "$" + theTotal.toFixed(2);
}
</script>

请注意，我声明了更多表和其他 onKeyUp 函数，但由于某种原因，该表之后的所有表（我有大约 6 个表，前 3 个表工作正常） ，不响应各自的onkeyup事件。

这是最后一个有效表的代码（该代码位于我上面发布的创建表的代码的正上方）：

<table cellspacing="0">
    <caption id="title4">
        Rubs (1.2 - 2.3oz.)
                </caption>
    <thead>
        <tr>
            <th>&nbsp;</th>
                                <td >Price</td>
                                <td >Quantity</td>
                        </tr>
    </thead>
    <tbody>
                    <tr class="statement4">
            <th><label>Buffalo</label></th>
                            <td title="Yes" >
                <label>$4.25</label>
            </td>
                            <td title="No" >
                <input id="rubs1" name="rubs1" class="field text small" type="text" value="0"/>
            </td>
                        <tr class="statement4">
            <th><label>Chipotle</label></th>
                            <td title="Yes" >
                <label>$4.25</label>
            </td>
                            <td title="No" >
                <input id="rubs2" name="rubs2" class="field text small" type="text" value="0"/>
            </td>

            <tr class="statement4">
            <th><label>Citrus</label></th>
                            <td title="Yes" >
                <label>$4.25</label>
            </td>
                            <td title="No" >
                <input id="rubs3" name="rubs3" class="field text small" type="text" value="0"/>
            </td>

            <tr class="statement4">
            <th><label>Creole</label></th>
                            <td title="Yes" >
                <label>$4.25</label>
            </td>
                            <td title="No" >
                <input id="rubs4" name="rubs4" class="field text small" type="text" value="0"/>
            </td>

            <tr class="statement4">
            <th><label>Crushed Peppercorn & Garlic</label></th>
                            <td title="Yes" >
                <label>$4.25</label>
            </td>
                            <td title="No" >
                <input id="rubs5" name="rubs5" class="field text small" type="text" value="0"/>
            </td>

            <tr class="statement4">
            <th><label>Greek</label></th>
                            <td title="Yes" >
                <label>$4.25</label>
            </td>
                            <td title="No" >
                <input id="rubs6" name="rubs6" class="field text small" type="text" value="0"/>
            </td>

            <tr class="statement4">
            <th><label>Jamaican Jerk</label></th>
                            <td title="Yes" >
                <label>$4.25</label>
            </td>
                            <td title="No" >
                <input id="rubs7" name="rubs7" class="field text small" type="text" value="0"/>
            </td>

            <tr class="statement4">
            <th><label>Lemon Pepper</label></th>
                            <td title="Yes" >
                <label>$4.25</label>
            </td>
                            <td title="No" >
                <input id="rubs8" name="rubs8" class="field text small" type="text" value="0"/>
            </td>

            <tr class="statement4">
            <th><label>Moroccan/label></th>
                            <td title="Yes" >
                <label>$4.25</label>
            </td>
                            <td title="No" >
                <input id="rubs9" name="rubs9" class="field text small" type="text" value="0"/>
            </td>

            <tr class="statement4">
            <th><label>Smoky Barbecue</label></th>
                            <td title="Yes" >
                <label>$4.25</label>
            </td>
                            <td title="No" >
                <input id="rubs10" name="rubs10" class="field text small" type="text" value="0"/>
            </td>

            <tr class="statement4">
            <th><label>Thai Red Curry</label></th>
                            <td title="Yes" >
                <label>$4.25</label>
            </td>
                            <td title="No" >
                <input id="rubs11" name="rubs11" class="field text small" type="text" value="0"/>
            </td>
                    </tr>
                </tbody>
</table>
原文

Here is the code initializing my Table:

<table cellspacing="0">
        <caption id="title4">
            Sprinkles (5 - 6 oz.)
                    </caption>
        <thead>
            <tr>
                <th> </th>
                                    <td >Price</td>
                                    <td >Quantity</td>
                            </tr>
        </thead>
        <tbody>
                        <tr class="statement4">
                <th><label>Lemon</label></th>
                                <td title="Yes" >
                    <label>$6.50</label>
                </td>
                                <td title="No" >
                    <input id="s1" name="s1" class="field text small" type="text" value="0"/>
                </td>
                            <tr class="statement4">
                <th><label>Sweet Apple</label></th>
                                <td title="Yes" >
                    <label>$6.50</label>
                </td>
                                <td title="No" >
                    <input id="s2" name="s2" class="field text small" type="text" value="0"/>
                </td>

                <tr class="statement4">
                <th><label>Sweet Caramel</label></th>
                                <td title="Yes" >
                    <label>$6.50</label>
                </td>
                                <td title="No" >
                    <input id="s3" name="s3" class="field text small" type="text" value="0"/>
                </td>

                <tr class="statement4">
                <th><label>Sweet Cinnamon</label></th>
                                <td title="Yes" >
                    <label>$6.50</label>
                </td>
                                <td title="No" >
                    <input id="s4" name="s4" class="field text small" type="text" value="0"/>
                </td>

                <tr class="statement4">
                <th><label>Sweet Mocha</label></th>
                                <td title="Yes" >
                    <label>$6.50</label>
                </td>
                                <td title="No" >
                    <input id="s5" name="s5" class="field text small" type="text" value="0"/>
                </td>
                        </tr>
                    </tbody>
    </table>

And here is my javascript:

<script type="text/javascript">
var total = 0.0;
var all=new Array();
for(var i = 0; i < 49; i++)
    all[i] = 0;

//....I OMMITTED CODE HERE FOR THE REST OF THE onkeyup FUNCTIONS
document.getElementById("s1").onkeyup = function() {
    if(this.value != "") {
        all[44] = (parseInt(this.value,10) * 6.50);
    }
    else {
        all[44] = 0;
    }
    updateIt();
};

document.getElementById("s2").onkeyup = function() {
    if(this.value != "") {
        all[45] = (parseInt(this.value,10) * 6.50);
    }
    else {
        all[45] = 0;
    }
    updateIt();
};

document.getElementById("s3").onkeyup = function() {
    if(this.value != "") {
        all[46] = (parseInt(this.value,10) * 6.50);
    }
    else {
        all[46] = 0;
    }
    updateIt();
};
document.getElementById("s4").onkeyup = function() {
    if(this.value != "") {
        all[47] = (parseInt(this.value,10) * 6.50);
    }
    else {
        all[47] = 0;
    }
    updateIt();
};

document.getElementById("s5").onkeyup = function() {
    document.getElementById("mySpan").innerHTML = "WOAH";

    if(this.value != "") {
        all[48] = (parseInt(this.value,10) * 6.50);
    }
    else {
        all[48] = 0;
    }
    updateIt();
};

function updateIt() {
    var theTotal = 0;
    for(var j = 0; j < 49; j++)
        theTotal += all[j];

    theTotal = all[48];
    document.getElementById("mySpan").innerHTML = "$" + theTotal.toFixed(2);
}
</script>

Note that I have more tables and other onKeyUp functions declared, but for some reason all the tables after this table (I have about 6 tables, and the first 3 work properly), do not respond to their respective onkeyup events.

Here is code for the last table that worked (this code is right above the code creating the table I posted above):

<table cellspacing="0">
    <caption id="title4">
        Rubs (1.2 - 2.3oz.)
                </caption>
    <thead>
        <tr>
            <th> </th>
                                <td >Price</td>
                                <td >Quantity</td>
                        </tr>
    </thead>
    <tbody>
                    <tr class="statement4">
            <th><label>Buffalo</label></th>
                            <td title="Yes" >
                <label>$4.25</label>
            </td>
                            <td title="No" >
                <input id="rubs1" name="rubs1" class="field text small" type="text" value="0"/>
            </td>
                        <tr class="statement4">
            <th><label>Chipotle</label></th>
                            <td title="Yes" >
                <label>$4.25</label>
            </td>
                            <td title="No" >
                <input id="rubs2" name="rubs2" class="field text small" type="text" value="0"/>
            </td>

            <tr class="statement4">
            <th><label>Citrus</label></th>
                            <td title="Yes" >
                <label>$4.25</label>
            </td>
                            <td title="No" >
                <input id="rubs3" name="rubs3" class="field text small" type="text" value="0"/>
            </td>

            <tr class="statement4">
            <th><label>Creole</label></th>
                            <td title="Yes" >
                <label>$4.25</label>
            </td>
                            <td title="No" >
                <input id="rubs4" name="rubs4" class="field text small" type="text" value="0"/>
            </td>

            <tr class="statement4">
            <th><label>Crushed Peppercorn & Garlic</label></th>
                            <td title="Yes" >
                <label>$4.25</label>
            </td>
                            <td title="No" >
                <input id="rubs5" name="rubs5" class="field text small" type="text" value="0"/>
            </td>

            <tr class="statement4">
            <th><label>Greek</label></th>
                            <td title="Yes" >
                <label>$4.25</label>
            </td>
                            <td title="No" >
                <input id="rubs6" name="rubs6" class="field text small" type="text" value="0"/>
            </td>

            <tr class="statement4">
            <th><label>Jamaican Jerk</label></th>
                            <td title="Yes" >
                <label>$4.25</label>
            </td>
                            <td title="No" >
                <input id="rubs7" name="rubs7" class="field text small" type="text" value="0"/>
            </td>

            <tr class="statement4">
            <th><label>Lemon Pepper</label></th>
                            <td title="Yes" >
                <label>$4.25</label>
            </td>
                            <td title="No" >
                <input id="rubs8" name="rubs8" class="field text small" type="text" value="0"/>
            </td>

            <tr class="statement4">
            <th><label>Moroccan/label></th>
                            <td title="Yes" >
                <label>$4.25</label>
            </td>
                            <td title="No" >
                <input id="rubs9" name="rubs9" class="field text small" type="text" value="0"/>
            </td>

            <tr class="statement4">
            <th><label>Smoky Barbecue</label></th>
                            <td title="Yes" >
                <label>$4.25</label>
            </td>
                            <td title="No" >
                <input id="rubs10" name="rubs10" class="field text small" type="text" value="0"/>
            </td>

            <tr class="statement4">
            <th><label>Thai Red Curry</label></th>
                            <td title="Yes" >
                <label>$4.25</label>
            </td>
                            <td title="No" >
                <input id="rubs11" name="rubs11" class="field text small" type="text" value="0"/>
            </td>
                    </tr>
                </tbody>
</table>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

天涯离梦残月幽梦 2024-10-21 09:32:38
var theTotal = 0;
for(var j = 0; j < 49; j++)
    theTotal += all[j];

theTotal = all[48];

你为什么要这样做？首先计算所有价格的总和，然后仅将最后一个值分配给 theTotal。这对我来说似乎是错误的。

var theTotal = 0;
for(var j = 0; j < 49; j++)
    theTotal += all[j];

theTotal = all[48];

Why are you doing this? First you calculate the sum of all prices, then you assign only the last value to theTotal. This seems wrong to me.

回复 原文
为你鎻心 2024-10-21 09:32:38

尽管您在 JS(document.getElementById("mySpan").innerHTML ) 中查找 id“mySpan”的元素，但您缺少该元素，因此出现错误。

添加具有该 ID 的 HTML 元素，它应该可以工作。

检查jsfiddle：http://jsfiddle.net/Chandu/yVaMx/5/

You are missing an element by id "mySpan" though you are looking for it in your JS(document.getElementById("mySpan").innerHTML ), hence it is erroring out.

Add a HTML element with that ID and it should work.

Check jsfiddle: http://jsfiddle.net/Chandu/yVaMx/5/

回复 原文
~没有更多了~

关于作者

破晓

暂无简介

0 文章
0 评论
22 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

留蓝

文章 0 评论 0

18790681156

文章 0 评论 0

zach7772

文章 0 评论 0

Wini

文章 0 评论 0

ayeshaaroy

文章 0 评论 0

初雪

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文