用于打印 SIMPLE 的 Javascript 函数答案

【问题标题】：Javascript functions to print SIMPLE用于打印 SIMPLE 的 Javascript 函数
【发布时间】：2019-04-03 17:54:19
【问题描述】：

我是编程新手，不知道为什么 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;

}

【问题讨论】：

在哪里/如何调用calculateTotal() 函数？
对不起，我的意思是把 calculateTotal() 函数放在我将编辑的 html 文件中 moneyTotal() 的位置
你确定你在src脚本标签的属性中使用了正确的路径吗？
只需将onselect 更改为oninput 或onchange，您的代码应该可以工作：jsfiddle.net/3rror404/uv4eg5bx/6。 onselect 在输入中选择文本时触发（即用光标突出显示文本）。
感谢萝卜工作完美

标签： javascript html arrays function

【解决方案1】：

首先，您使用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

现在，尚不清楚您要对该数组做什么，而且您尝试做的似乎没有多大意义-您的函数谈论金钱和计算总数，但您的 @ 987654329@ 有字符串值。

最后，您使用的代码使用了古老的技术，您真的不应该太习惯使用这些技术。那里有很多糟糕的代码，所以从有信誉的来源学习。 The Mozilla Developer Network 是一个。

查看这个缩减的解决方案，让您了解“移动部件”以启动和运行某些东西。请注意所有 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>

【讨论】：