Блог

Сомнительно, что это требует подробных объяснений, но я думаю, мне нужна вторая пара глаз, чтобы проверить это, потому что я просто не могу понять, почему этого не произойдет! Попробуйте использовать «Калькулятор энергии», и при отправке не будет возвращено никакого значения, несмотря на то, что я подхожу к нему так же, как к «Калькулятору заряда батареи», который действительно работает.

Ссылка:http://jsfiddle.net/Deva/426Jj /

Чтобы уточнить ответ @alex, вы выбрали onLoad опцию jsFiddle, которая помещает ваш код 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 amp;amp; 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 amp;amp; 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 amp;amp; velocity) {
            message = 'Energy of weapon: '   energy   ' Joules';
        }

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


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

Демонстрация:http://jsfiddle.net/mattball/JSpaU /

Видите выпадающий список слева с надписью «onLoad»? Измените его на «без переноса (head)», и это сработает.

Это из-за того, как работает jsfiddle. Вам нужно объявить функцию energyCalc следующим образом:

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

energyCalc() обернуто в функцию ( load функция события) и не отображается в глобальной области видимости.

Это работает, когда оно становится глобальным.

jsFiddle.

Удалите action = "javascript:energyCalc()"

и добавить:

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

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