Простая функция возврата onClick не работает

Question

Простая функция возврата onClick не работает

0

У меня есть функция:

        <script type = "text/javascript">
        function calcEstimate(instrument, damage)
        {
            var cost = 0;
            if (instrument.value == "guitar" || instrument.value == "bass")
            {
                cost = Number(damage.value) * 150;
                document.getElementById('txtCost').value = cost;
            }
            else
            {
                cost = Number(damage.value) * 300;
                document.getElementById('txtCost').value = cost;
            }
        }
    </script>

И форма с некоторыми входами:

            <form style = "border: solid white 1px; width:35%;" name = "calculator">
            <table>
                <tr>
                    <th style = "font-size: 20px;" colspan = 3;> Select your instrument: </th>
                </tr>

                <tr>
                    <th> Percussion: </th>
                    <th> Strings: </th>
                    <th> Brass: </th>
                </tr>   

                <tr> 
                    <td> <input type = "radio" name = "instrument" value = "keyboard_piano">Keyboard/ Piano. </td>
                    <td> <input type = "radio" name = "instrument" value = "guitar">Guitar. </td>                       
                    <td> <input type = "radio" name = "instrument" value = "bass">Trumpet. </td> 
                </tr>

                <tr>
                    <td> <input type = "radio" name = "instrument" value = "bass_drum">Bass drum. </td>
                    <td> <input type = "radio" name = "instrument" value = "bass">Bass. </td>
                    <td> <input type = "radio" name = "instrument" value = "trombone">Trombone. </td> 
                </tr>

                <tr>
                    <td> <input type = "radio" name = "instrument" value = "snare_drum">Snare drum. </td>
                    <td> <input type = "radio" name = "instrument" value = "violin">Violin. </td>                       
                    <td> <input type = "radio" name = "instrument" value = "tuba">Tuba. </td> 
                </tr>

                <tr>
                    <td> <input type = "radio" name = "instrument" value = "tom_toms">Tom-toms. </td>
                    <td> <input type = "radio" name = "instrument" value = "cello">Cello. </td>                     
                </tr>

                <tr>
                    <td> <input type = "radio" name = "instrument" value = "ride_cymbal">Ride Cymbal. </td>
                </tr>

                <tr>
                    <td> <input type = "radio" name = "instrument" value = "crash_cymbal">Crash Cymbal. </td>
                </tr>

                <tr>
                    <td> <input type = "radio" name = "instrument" value = "hi_hat">Hi-hat. </td>
                </tr>                       

            </table>

            <table>
                <tr>
                    <th style = "font-size: 20px;"> Scale of damage: </th>
                </tr>

                <tr>
                    <td> <input type = "radio" name = "damage" value = "1">1. Slight damage, cracks. </td>
                </tr>

                <tr>
                    <td> <input type = "radio" name = "damage" value = "2">2. Some broken parts. </td>
                </tr>

                <tr>
                    <td> <input type = "radio" name = "damage" value = "3">3. Parts missing, broken off, may be unplayable. </td>
                </tr>

                <tr>
                    <td> <input type = "radio" name = "damage" value = "4">4. In pieces, completely unplayable. </td>
                </tr>
            </table>

            <table>
                <tr>
                    <td> 
                        <input type = "button" name = "calculate" value = "Calculate" onClick ="calcEstimate(instrument,damage);">
                        <input type = "reset" name = "reset" value = "Reset Form">
                    </td>
                </tr>                   

                <tr>
                    <th style = "font-size: 20px;"> Estimate: </th>
                </tr>

                <tr>
                    <td> <input type = "text" id="txtCost" name = "cost" size = 25> </td>
                </tr>
            </table>
        </form>

Я хочу, чтобы можно было выбрать instrument радиокнопки и damage радиокнопки, щелкнуть кнопку calculate и передать damage и instrument для функции calcEstimate, где он будет выполнять вычисления и возвращать переменную cost. Однако, когда я нажимаю кнопку "Расчет", ничего не происходит вообще. Я сделал много других попыток и искал в Интернете, но ничего, что мне кажется, кажется, помогает.

David Lacombe 29 нояб. 2013, в 03:15

Источник

3

Вашей первой ошибкой было использование onclick внутри вашего html. Это никогда не было хорошей практикой.
m59 29 нояб. 2013, в 02:15
0

Нет ничего плохого в onclick inhtml
MultiplyByZer0 29 нояб. 2013, в 02:18
0

Я смог запустить ваш код в Firefox и Chrome, и js запустил и заполнил поле стоимости 150. Ваша логика не обязательно выглядит правильно, но функционально это работает.
ohiodoug 29 нояб. 2013, в 02:21
3

@MistressDavid Все не так с onclick в html.
m59 29 нояб. 2013, в 02:29
0

Какая? Я пользуюсь этим все время. Почему?
MultiplyByZer0 29 нояб. 2013, в 02:30
0

@MistressDavid Нетрудно найти ваш ответ. google.com/...
m59 29 нояб. 2013, в 02:36
0

MistressDavid: Это работает, но это плохо для ремонтопригодности. Вы должны стремиться к разделению интересов: HTML описывает структуру документа, js описывает интерактивные элементы, так же как css описывает презентацию. Сохраняя эти элементы модульными и раздельными, это дает вам максимальную гибкость для внесения изменений и понимания структуры различных вовлеченных элементов.
LiavK 29 нояб. 2013, в 03:26

Показать ещё 5 комментариев

Теги:

javascript

html

css

2 ответа

1

<label><input type="radio" name="instrument" value="guitar">Guitar</label>
<label><input type = "radio" name="damage" value="1">Damage</label>

<button name="calculate">Calculate</button>
<input type="text" name="cost" size="25">

js: live demo здесь (нажмите).

/* Get your element references */
var instrument = document.querySelector('input[name=instrument]');
var damage = document.querySelector('input[name=damage]');
var calculate = document.querySelector('button[name=calculate]');
var cost = document.querySelector('input[name=cost]');

calculate.addEventListener('click', function() {
  cost.value = calcEstimate(instrument.value, damage.value);
});

function calcEstimate(instrument, damage) {
  var cost = 0;
  if (instrument.value == "guitar" || instrument.value == "bass") {
    cost = Number(damage) * 150;
  }
  else {
    cost = Number(damage) * 300;
  }
  return cost;
}

m59 29 нояб. 2013, в 00:32

Ещё вопросы

Вашей первой ошибкой было использование onclick внутри вашего html. Это никогда не было хорошей практикой.
Я смог запустить ваш код в Firefox и Chrome, и js запустил и заполнил поле стоимости 150. Ваша логика не обязательно выглядит правильно, но функционально это работает.
Какая? Я пользуюсь этим все время. Почему?
@MistressDavid Нетрудно найти ваш ответ. google.com/...
MistressDavid: Это работает, но это плохо для ремонтопригодности. Вы должны стремиться к разделению интересов: HTML описывает структуру документа, js описывает интерактивные элементы, так же как css описывает презентацию. Сохраняя эти элементы модульными и раздельными, это дает вам максимальную гибкость для внесения изменений и понимания структуры различных вовлеченных элементов.

HICURIN · Accepted Answer · 2013-11-29T00-18-00.000Z

Ваш javascript будет:

var damageValue = 0;
function getDamage(val){
  damageValue = val;
}
function calcEstimate(instrument, damage)
            {
                var cost = 0;
                if (instrument.value == "guitar" || instrument.value == "bass")
                {
                    cost = Number(damageValue) * 150;
                    document.getElementById('txtCost').value = cost;
                }
                else
                {
                    cost = Number(damageValue) * 300;
                    document.getElementById('txtCost').value = cost;
                }
            }

и ваш html будет выглядеть так:

<input type = "radio" name = "instrument" value = "guitar">Guitar.
<input type = "radio" name = "damage" value = "1" onclick="getDamage(this.value);">

<input type = "button" name = "calculate" value = "Calculate" onClick ="calcEstimate(instrument,damage);">
<input type = "text" id="txtCost" name = "cost" size = 25>

Пожалуйста, убедитесь, что у вас есть инструмент и вычислите объект по мере его использования. Если нет, вы должны попытаться изучить javascript больше, чем сейчас.

Это наполнило коробку "NaN", что лучше, чем абсолютно ничего. Я отредактировал свое исходное сообщение с полным кодом, поскольку я вставил только ту часть, которая, как мне казалось, вызывала проблемы. Кроме того, я делаю эту веб-страницу для школы, и функция должна иметь отдачу, что делает ее немного более сложной для меня.
Итак, вы проверили инструмент.значение и ущерб.значение? если нет, проверьте это с помощью функции alert ().
Я только что проверил их, и он говорит «неопределенный» для них обоих?
Да сэр! Вот почему ваша стоимость NaN, потому что это результат неопределенного умножения 300.
Я только что обновил свой ответ! Поместите onclick = "getDamage (this.value);" в каждом твой переключатель. Пожалуйста, попробуйте это.
Большое спасибо за вашу помощь, это сработало. И я действительно понимаю, как это работает, так что это тоже очень полезно!