Question

令人怀疑这需要很多解释，但我想我需要第二眼来检查这一点，因为我无法理解为什么它不会！尝试使用“能量计算器”，在提交时不会返回任何值，尽管我接近它的方式与“电池充电计算器”的工作方式相同。

Answer 1

要详细说明@ 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。

请记住，编写unobtrusive JavaScript是更好的编码习惯。在这种情况下，您将使用attachEvent（对于IE＆lt; 9）或addEventListener（对于真实浏览器）将事件处理程序与JavaScript绑定。

修改 re：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);
});

演示：http://jsfiddle.net/mattball/JSpaU/

Answer 2

请参阅左侧的“onLoad”下拉列表？将其更改为“无包裹（头部）”并且它将起作用。

Answer 3

这是因为jsfiddle的工作方式。你需要像这样声明energyCalc函数：

window.energyCalc = function() { ... }

Answer 4

energyCalc()包含在函数（load事件的函数）中，并且对全局范围不可见。

Example

它在全球化时起作用。

jsFiddle

Answer 5

删除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。

UPDATE2 在查看新的jsfiddle
之后
http://jsfiddle.net/426Jj/2/

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

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

使用Javascript修改HTML内容

5 个答案:

HTML

的JavaScript

演示：http://jsfiddle.net/mattball/JSpaU/