使用Javascript修改HTML内容

Question

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

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

Answer 1

要详细说明@ alex的答案,您已经选择了onLoadjsFiddle选项,它将您的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(使用attachEventIE <9)或addEventListener(对于真实浏览器)绑定事件处理程序.

编辑 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"下拉列表？把它改成"没有包裹(头)",它会工作.