logo标签列表

使用JavaScript修改HTML内容

javascripthtmlinnerhtmlgetelementbyid
4

这个问题看起来不需要太多解释，但我觉得我需要第二个人来检查一下，因为我真的无法理解为什么它不能工作！尝试使用“能量计算器”，当提交时没有返回值，虽然我以与“电池充电计算器”相同的方式处理它，但后者确实可以正常工作。

链接： http://jsfiddle.net/Deva/426Jj/

如果您在页面的其他部分使用了jQuery，那么在此部分中也可以使用jQuery，不是吗？ - James Khoury
5个回答
6
为了详细说明@alex的回答，您选择了jsFiddle的onLoad选项，该选项将JavaScript代码放置在匿名函数中：
window.onload = function() {
    function energyCalc() {
        var mass = document.forms['0'].mass.value;
        var finalMass = mass * 1000;
        var velocity = document.forms['0'].velocity.value;
        var finalVelocity = velocity * 0.3048;
        var energy = (0.5 * (finalMass * (finalVelocity * finalVelocity)));
        if ((mass && velocity) != '') {
            document.getElementById("energy").innerHTML = 'Energy of weapon: ' + energy + ' Joules';
        } else {
            document.getElementById("energy").innerHTML = 'You must enter values in both fields!';
        }
    }
}

试试这个：http://jsfiddle.net/mattball/Cbsa8/。我所做的只是选择了no wrap (head)和No library。
请记住，编写不显眼的JavaScript是更好的编码习惯。在这种情况下，您需要使用JavaScript绑定事件处理程序，使用attachEvent（对于IE <9）或addEventListener（对于真正的浏览器）。

编辑关于OP编辑

打开控制台，尝试使用能源计算器后，问题立即变得明显：

> Uncaught TypeError: Cannot read property 'value' of undefined (fiddle.jshell.net:100)

这是这一行：

var mass = document.forms['0'].mass.value;

您正在访问错误的表单。在能量计算器的代码中，您需要将forms['0']的所有情况更改为forms[1]。顺便注意省略的引号 - document.forms是一个数组，而不是对象！

此外，您显然在使用jQuery，但没有充分利用它。为什么不呢？您的代码有很大的改进空间。现在是清理时间！

HTML

<div id="main">
    <a href="#"><h3>Battery Charge Calculator</h3></a>
    <div class="slide">
        <form id="batteryForm" action="">
            <p>
                Battery Capacity (mah):
            </p>
            <p>
                <input name="capacity"/>
            </p>
            <p>
                Charge Rate (mA):
            </p>
            <p>
                <input name="rate"/>
            </p>
            <p>
                <input type="submit" value="Submit"/>
            </p>
            <br/>
            <p id="time"/>
        </form>
    </div>
    <a href="#"><h3>Energy Calculator</h3></a>
    <div class="slide">
        <form id="energyForm" action="">
            <p>
                Mass of BB (grammes):
            </p>
            <p>
                <input name="mass"/>
            </p>
            <p>
                Power of weapon (FPS):
            </p>
            <p>
                <input name="velocity"/>
            </p>
            <p>
                <input type="submit" value="Submit"/>
            </p>
            <br/>
            <p id="energy"/>
        </form>
    </div>
</div>

JavaScript

$(function() {
    $('#main > a > h3').click(function() {
        $(this).closest('a').next('div.slide').animate({
            height: 'toggle'
        }, 750);
    });

    function batteryCalc() {
        var capacity = this.capacity.value,
            rate = this.rate.value,
            time = capacity / (rate / 1.2),
            chargeTime = (Math.round(10 * time) / 10).toFixed(1),
            message = 'You must enter values in both fields!';

        if (capacity && rate) {
            message = 'Required time on charge: ' + chargeTime + ' hours';
        }

        $('#time').html(message);
        return false;
    }

    function energyCalc() {
        var mass = this.mass.value,
            finalMass = mass * 1000,
            velocity = this.velocity.value,
            finalVelocity = velocity * 0.3048,
            energy = (0.5 * (finalMass * (finalVelocity * finalVelocity))).toFixed(1),
            message = 'You must enter values in both fields!';

        if (mass && velocity) {
            message = 'Energy of weapon: ' + energy + ' Joules';
        }

        $('#energy').html(message);
        return false;
    }


    $('#batteryForm').submit(batteryCalc);
    $('#energyForm').submit(energyCalc);
});

Demo: http://jsfiddle.net/mattball/JSpaU/

太好了！感谢您抽出时间来做这件事。这是我第一次尝试使用jQuery，这就解释了代码的混乱。我会尽力审查并理解它们。谢谢！ - Matt
没问题，不用谢。如果你将来有正确（可运行）的代码，并认为它可以得到改进，你可以在codereview.se上发布它。 - Matt Ball
5

看到左侧的下拉列表，上面写着“onLoad”吗？把它改成“no wrap (head)”就可以了。

这是非常真实的 - 不过这并不是我的问题所在。问题也存在于 jsFiddle 之外。 - Matt
那么问题是什么？它没有正确计算吗？ - Ry-
@matt 那么当你提问时，应该更加具体明确。 - Matt Ball
1
抱歉，我只是想尝试将其他因素排除在外。请参见：http://jsfiddle.net/Deva/426Jj/ 获取完整代码。如果在 jsFiddle 中修改某些内容可以解决问题，这对我没有帮助，因为我正在尝试将其作为独立的 HTML 页面运行。非常感谢。 - Matt
3
这是因为jsfiddle的工作方式。您需要像这样声明energyCalc函数：
window.energyCalc = function() { ... }
2

energyCalc()被封装在一个函数中（load事件的函数），并且不可见于全局范围。

示例

当它被设置为全局时，它会起作用。

jsFiddle。

0

移除 action = "javascript:energyCalc()"

并添加：

jQuery(document).ready(function()
{
    jQuery(document.forms[0]).submit(energyCalc);
});

没有使用jQuery 

<form method="post" onsubmit="energyCalc();" >

编辑

还需要返回值（true或false）

请查看：http://jsfiddle.net/SabAH/7/ http://jsfiddle.net/SabAH/11/

更新一个解释：

action属性告诉浏览器要提交到哪里。函数需要在onsubmit上运行。

更新2查看新的jsfiddle后

http://jsfiddle.net/426Jj/2/

有一些错误。首先，您的action="javascript:..."需要改为onsubmit="javascript: return ..."并删除提交按钮的onclick事件，能量方法需要引用forms[1]而不是forms[0]，因为它是第二个表单。主要就是这些。

请查看：http://jsfiddle.net/426Jj/2/

2
jQuery与此有什么关系？ - Wesley Murch
这是一个很好的观点。有点像习惯！但是它可以很容易地实现而不需要。 - James Khoury
@wesley 现在没有 jQuery。这样更好吗？ - James Khoury
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接