Функции Javascript для печати ПРОСТОЙ - PullRequest
0 голосов
/ 30 октября 2018

Я новичок в программировании и не могу понять, почему функция innerHTML не будет печатать значение на экране (я понял, что использовал две функции, и это кажется дополнительным для этого небольшого количества кода, но это потому, что это для большой проект)

<!DOCTYPE html>
<html>

<head>
    <title></title>
</head>
<body>
    <form id="moneyform" name="moneyform">
        <fieldset>
            <select id="money" name="money" onselect="calculateTotal()">
                <option value="loon">1 dollar</option>
                <option value="toon">2 dollar</option>
            </select>
            <br>
            <p id="pg"></p>
        </fieldset>
    </form>
<script type="text/javascript" src="TEST.js"></script>
</body>
</html>

//JAVASCRIPT BELOW

var moneyprice = new Array();
moneyprice["loon"] = 1;
moneyprice["toon"] = 2;

function moneyTotal() {
    var mons = 0;
    var frm = document.forms["moneyform"];
    var selectedMoney = frm.elements["money"];
    mons = moneyprice[selectedMoney.value]

    return mons;
}

function calculateTotal() {
    var total = moneyTotal();

    document.getElementById("pg").innerHTML = total;

}

1 Ответ

0 голосов
/ 30 октября 2018

Во-первых, вы используете событие onselect, чтобы начать, но select - это когда пользователь выбирает текст внутри поля text или textarea. Вы захотите использовать событие change, которое срабатывает при изменении значения элемента.

Далее, вы не работаете с вашим массивом должным образом, и ваш результат возвращается как ничто. Массивы имеют неотрицательные целочисленные индексы, в которых можно хранить данные. У них нет имен ключей для хранения данных - объекты делают это. Здесь вы можете видеть, что после запуска этих строк у вас все еще есть пустой массив:

var moneyprice = new Array();  // Ok.

// moneyprice doesn't/can't have a "loon" or a "toon" index
// so neither of these lines accomplish anything
moneyprice["loon"] = 1;        
moneyprice["toon"] = 2;

console.log(moneyprice); // Empty array

// ******************************************

// Now, this is how to use an array:
var moneyprice2 = new Array();  // Ok.

// You interact with an Array via its numeric indexes:
moneyprice2[0] = "loon";        
moneyprice2[1] = "toon";

console.log(moneyprice2); // Empty array

Теперь не совсем понятно, что вы пытаетесь делать с этим массивом, и кажется, что то, что вы пытаетесь сделать, не имеет особого смысла - ваши функции говорят о деньгах и подсчете итогов, но ваши select имеет строковые значения.

Наконец, код, который вы используете, использует древние методы, которые вы не должны использовать слишком удобно. Там много плохого кода, так что учитесь из авторитетного источника. Сеть разработчиков Mozilla - это одно.

Посмотрите на это уменьшенное решение, чтобы дать вам представление о «движущихся частях», чтобы что-то запустить и запустить. Обратите внимание, как весь JavaScript отделен от HTML.

// Get your element references the proper way.
// No need to get a reference to the form, just to get a reference
// to the select and even if we did want to get a reference
// to the form, we use the modern DOM API to do it (not document[forms]).
let select = document.getElementById("money");
let pg = document.getElementById("pg");

// Set up event handlers in JavaScript, not with HTML attributes
select.addEventListener("change", calculateTotal);

function calculateTotal() {
  // .innerHTML should only be used when the string you are dealing with
  // contains HTML that needs to be parsed as such. When there isn't any
  // HTML, use .textContent
  pg.textContent = select.value;
}
<form id="moneyform">
  <fieldset>
    <select id="money" name="money">
      <option value="loon">1 dollar</option>
      <option value="toon">2 dollar</option>
    </select>
    <br>
    <p id="pg"></p>
  </fieldset>
</form>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...