如何在 HTML 中显示 JavaScript 函数的结果？答案

【问题标题】：How do I display the results of a JavaScript function in HTML?如何在 HTML 中显示 JavaScript 函数的结果？
【发布时间】：2018-10-29 18:35:43
【问题描述】：

我正在编写一个程序来根据用户输入显示成绩。但是，当我正确输入所有输入后按“提交”时，什么也没有发生。我认为我的 onclick 功能不正确。此外，如何显示用户在 HTML 页面上输入的内容？谢谢你。编辑：感谢您的所有回复。绝对帮了我。

 <form name="form1">
<p><b>Name: </b> <input TYPE="TEXT" SIZE="20" NAME="yourname"></p>

<p><b>Assignment 1: </b><input type="number" id="assign1" size=10 value="" name="onlynumbers" min="0" max="25" required><span class="required">*</span></p>

<p><b>Assignment 2: </b><input type="number" id="assign2" size=10 value="" name="onlynumbers" min="0" max="25" required><span class="required">*</span></p>

<p><b>Assignment 3: </b><input type="number" id="assign3" size=10 value="" name="onlynumbers" min="0" max="25" required><span class="required">*</span></p>

<p><b>Assignment 4: </b><input type="number" id="assign4" size=10 value="" name="onlynumbers" min="0" max="25" required><span class="required">*</span></p>

<p><b>Midterm Exam: </b><input type="number" id="assign5" size=10 value="" name="onlynumbers" min="0" max="100" required><span class="required">*</span></p>

<p><b>Final Exam: </b><input type="number" id="assign6" size=10 value="" name="onlynumbers" min="0" max="100" required><span class="required">*</span></p>

<p><b>Final Project:</b><input type="number" id="assign7" size=10 value="" name="onlynumbers" min="0" max="100" required=""><span class="required">*</span></p>

<p>
<button onclick = "getElementById('average').value=calculator(getElementById('average').value)">Submit</button>
<input type="reset" value="Reset">

</p>
</form>
</p>


<script type="text/javascript">

    function calculator()
    {
        var grade1=parseFloat(document.getElementById('assign1').value*1);
        var grade2=parseFloat(document.getElementById('assign2').value*1);
        var grade3=parseFloat(document.getElementById('assign3').value*1);
        var grade4=parseFloat(document.getElementById('assign4').value*1);
        var grade5=parseFloat(document.getElementById('midterm').value*1);
        var grade6=parseFloat(document.getElementById('final').value*1);
        var grade7=parseFloat(document.getElementById('project').value*1);
        var total=grade1 + grade2 + grade3 + grade4 + grade5 + grade6 + grade7;
        var average = total / 4


    }



</script>

【问题讨论】：

你的点击功能不是来自这个世界：D。您给出的是 onlclick 函数中的表达式。删除表达式，只需添加带有一些参数的函数名称（如果有）。
简单使用 onclick='calculator()' 并在该函数中使用 console.log 只是为了测试该函数是否正确调用，然后执行其他操作。
现在如果它工作正常，然后通过它们的 id 获取每个输入的值，然后将它们全部添加到一个变量中并提取它的平均值。之后创建一个 div 标签并给它任何 id 并通过它们的 id 将结果放入该 div 中。
无法正常工作，因为 id 不匹配。

标签： javascript html input element

【解决方案1】：

在 HTML 中添加 <div id="average"> </div> 以显示结果，然后更改如下代码

<button onclick = "calculator()">Submit</button>

<script type="text/javascript">

    function calculator()
    {
        var grade1=parseFloat(document.getElementById('assign1').value*1);
        var grade2=parseFloat(document.getElementById('assign2').value*1);
        var grade3=parseFloat(document.getElementById('assign3').value*1);
        var grade4=parseFloat(document.getElementById('assign4').value*1);
        var grade5=parseFloat(document.getElementById('midterm').value*1);
        var grade6=parseFloat(document.getElementById('final').value*1);
        var grade7=parseFloat(document.getElementById('project').value*1);
        var total=grade1 + grade2 + grade3 + grade4 + grade5 + grade6 + grade7;
        var average = total / 4
        // add average value to the average element 
        document.getElementById('average').innerHTML = average;

    }



</script>

【讨论】：

对示例的建议：不再需要 type="text/javascript"。 globalEventHandler 而不是内联 js。并且在var之间使用,逗号！ document.getElementById 不是必需的（直接使用名称），并且带有 return 的函数会很好地避免重复 Upvoted！

【解决方案2】：

有一些事情需要解决。

1) 你应该减少对内联 JS 的使用。最好的做法是将 JS 分离到一个单独的文件中，然后在加载 DOM 后将事件侦听器添加到 DOM。

2) 如果您需要在表单上做一些工作（例如 JavaScript 验证）在单击提交按钮之后，那么您需要阻止表单实际被提交。这可以通过preventDefault 来实现。

3) 您可以通过提取所有输入并对其进行迭代来简化计算例程。您可以使用简单的for/loop，或类似reduce 的功能。这样你就可以摆脱输入ID。

4) 您需要一个元素，您可以在其中放置 HTML 中缺少的计算输出。

我已经为这个示例使用/缩短了您的代码。希望对你有帮助。

// pick up the form, input, and output elements
const form = document.querySelector('form');
const inputs = form.querySelectorAll('input[type="number"]');
const output = document.querySelector('.output');

// add an submit listener to the form that calls `handleSubmit`
form.addEventListener('submit', handleSubmit, false);

function handleSubmit(e) {

  // prevent the form from submitting
  e.preventDefault();

  // loop over the inputs and add their values to the total
  let total = 0;
  for (let i = 0; i < inputs.length; i++) {
    total += Number(inputs[i].value);
  }

  // calculate the total
  const avg = total / inputs.length;

  // add the total and average to the text content of the output element
  output.textContent = `Total: ${total}, Avg: ${avg}`;
}

label { display: block; }
input { margin-left: 5px; }

<form name="form1">
  <label>Assignment 1<input type="number" size=10 name="onlynumbers" min="0" max="25" required><span class="required">*</span></label>
  <label>Assignment 2<input type="number" size=10 name="onlynumbers" min="0" max="25" required><span class="required">*</span></label>
  <label>Assignment 3<input type="number" size=10 name="onlynumbers" min="0" max="25" required><span class="required">*</span></label>
  <label>Assignment 4<input type="number" size=10 name="onlynumbers" min="0" max="25" required><span class="required">*</span></label>
  <button class="submit">Submit</button>
  <div class="output"></div>
</form>

【讨论】：

【解决方案3】：

欢迎林威尔逊，

一个简单的解决方法如下：

            function calculator() {
                var average = 0;
    
                var grade1 = parseFloat(document.getElementById('assign1').value * 1);
                var grade2 = parseFloat(document.getElementById('assign2').value * 1);
                var grade3 = parseFloat(document.getElementById('assign3').value * 1);
                var grade4 = parseFloat(document.getElementById('assign4').value * 1);
                var grade5 = parseFloat(document.getElementById('assign5').value * 1);
                var grade6 = parseFloat(document.getElementById('assign6').value * 1);
                var grade7 = parseFloat(document.getElementById('assign7').value * 1);
                var total = grade1 + grade2 + grade3 + grade4 + grade5 + grade6 + grade7;
                average = total / 7;
    
                if (average > 0) {
                    document.getElementById('lblGrade').innerHTML = 'Your Final Grade = ' + average;
                }
            }

<form>
        <p><b>Name: </b> <input TYPE="TEXT" SIZE="20" NAME="yourname"></p>
    
        <p><b>Assignment 1: </b><input type="number" id="assign1" size=10 value="" name="onlynumbers" min="0" max="25" required><span class="required">*</span></p>
    
        <p><b>Assignment 2: </b><input type="number" id="assign2" size=10 value="" name="onlynumbers" min="0" max="25" required><span class="required">*</span></p>
    
        <p><b>Assignment 3: </b><input type="number" id="assign3" size=10 value="" name="onlynumbers" min="0" max="25" required><span class="required">*</span></p>
    
        <p><b>Assignment 4: </b><input type="number" id="assign4" size=10 value="" name="onlynumbers" min="0" max="25" required><span class="required">*</span></p>


        <!-- You had the incorrect id names from here and below -->
        <p><b>Midterm Exam: </b><input type="number" id="assign5" size=10 value="" name="onlynumbers" min="0" max="100" required><span class="required">*</span></p>
    
        <p><b>Final Exam: </b><input type="number" id="assign6" size=10 value="" name="onlynumbers" min="0" max="100" required><span class="required">*</span></p>
    
        <p><b>Final Project:</b><input type="number" id="assign7" size=10 value="" name="onlynumbers" min="0" max="100" required=""><span class="required">*</span></p>
    
        <p>
            <!-- Be sure to return false; The return false prevents the page from being navigated and unwanted scrolling of a window to the top or bottom. -->
            <button onclick="calculator(); return false;">Submit</button>
            <input type="reset" value="Reset ">
        </p>
    
        <p>
            <label id="lblGrade"/>
        </p>
</form>

【讨论】：

【解决方案4】：

您的代码中有很多错误。这是以下工作，但首先：

您应该阻止表单验证 (onsubmit) 以防止页面重新加载。
您应该将显示功能调用到您的onsubmit 中，而不是在单击按钮期间
你的calculator()函数应该是return的平均值
要使用内容填充 div，请使用 innerHTML=variable
您的结果<div id="average"></div> 丢失
很多输入 div 没有正确的id=""

function calculator() {
  var grade1 = parseFloat(document.getElementById('assign1').value * 1);
  var grade2 = parseFloat(document.getElementById('assign2').value * 1);
  var grade3 = parseFloat(document.getElementById('assign3').value * 1);
  var grade4 = parseFloat(document.getElementById('assign4').value * 1);
  var grade5 = parseFloat(document.getElementById('midterm').value * 1);
  var grade6 = parseFloat(document.getElementById('final').value * 1);
  var grade7 = parseFloat(document.getElementById('project').value * 1);
  var total = grade1 + grade2 + grade3 + grade4 + grade5 + grade6 + grade7;
  var average = total / 4;
  return average;
}

function displayResult() {
  var result = calculator();
  document.getElementById('average').innerHTML = result;
  return false;
}

<form name="form1" onsubmit="event.preventDefault();return displayResult();">
  <p><b>Name: </b> <input TYPE="TEXT" SIZE="20" NAME="yourname"></p>

  <p><b>Assignment 1: </b><input type="number" id="assign1" size=10 value="" name="onlynumbers" min="0" max="25" required><span class="required">*</span></p>

  <p><b>Assignment 2: </b><input type="number" id="assign2" size=10 value="" name="onlynumbers" min="0" max="25" required><span class="required">*</span></p>

  <p><b>Assignment 3: </b><input type="number" id="assign3" size=10 value="" name="onlynumbers" min="0" max="25" required><span class="required">*</span></p>

  <p><b>Assignment 4: </b><input type="number" id="assign4" size=10 value="" name="onlynumbers" min="0" max="25" required><span class="required">*</span></p>

  <p><b>Midterm Exam: </b><input type="number" id="midterm" size=10 value="" name="onlynumbers" min="0" max="100" required><span class="required">*</span></p>

  <p><b>Final Exam: </b><input type="number" id="final" size=10 value="" name="onlynumbers" min="0" max="100" required><span class="required">*</span></p>

  <p><b>Final Project:</b><input type="number" id="project" size=10 value="" name="onlynumbers" min="0" max="100" required=""><span class="required">*</span></p>

  <p>
    <button>Submit</button>
    <input type="reset" value="Reset">
  </p>
</form>

<div id="average"></div>

下次请尝试自己调试。您需要隔离问题并从那里进行调试。

如果您遇到困难，请清楚说明 Minimal, Complete, and Verifiable example 的问题所在。我建议阅读How to Ask a good question。另外，一定要take the tour

【讨论】：