Использование Javascript для изменения содержимого HTML

Question

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

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

Answer 1

Чтобы уточнить ответ @ 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 && 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) или <a href="https://developer.mozilla.org/en/DOM/element.addEventListener" rel="nofollow">addEventListener (для реальных браузеров).

---

Edit re: OP edits

Откройте консоль, и проблема сразу станет очевидной после попытки использования Калькулятора энергии:

> 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 функция события) и невидим для глобальной области видимости.

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

jsFiddle .

Answer 5

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

и добавьте:

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

Нет запросов

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

EDIT

Также нужны возвращаемые значения (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 ..." и убрать щелчок на кнопках отправки. Энергетический метод необходим для ссылки forms[1], а не forms[0], потому что это была вторая форма. Вот в основном это.

посмотрите на: http://jsfiddle.net/426Jj/2/