数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究JavaScript 如何将函数结果显示为 HTML？
在本文中，我们将学习如何使用 JavaScript 将函数的结果显示为 HTML。
在 JavaScript 中，函数类似于过程——一组执行操作或计算值的语句。但是，为了使过程被视为函数，它必须接受输入并产生输出，并且输入和输出之间必须存在明显的关联。
语法
以下是 JavaScript 中函数的语法
function name(parameter1, parameter2, parameter3) {
// code to be executed
}
让我们深入本文，了解更多关于如何将函数的结果显示为 HTML 的内容。要将函数的结果显示为 HTML，您可以使用 –
document.getElementById().innerHTML.
JavaScript 中的 getElementById()
DOM 方法 getElementById() 用于查找 ID 属性设置为所需值的元素。当我们想要操作文档上的元素时，通常会使用此方法，它是 HTML DOM 中最流行的方法之一。如果不存在具有给定 ID 的元素，则此方法返回 null。
语法
以下是 JavaScript 中 getElementById() 的语法。
document.getElementById(elementID)
让我们来看下面的例子，以便更好地理解如何将函数的结果显示为 HTML。
示例
在下面的示例中，我们正在运行一个脚本以将函数显示为结果。
<!DOCTYPE html>
<html>
<body>
<form name="form1">
<label>M1 Marks:<input type="number" required><span class="required">*</span></label>
<label>M2 Marks:<input type="number" required><span class="required">*</span></label>
<button class="submit">Submit</button>
<div class="output"></div>
</form>
<script>
const form = document.querySelector('form');
const inputs = form.querySelectorAll('input[type="number"]');
const output = document.querySelector('.output');
form.addEventListener('submit', handleSubmit, false);
function handleSubmit(e) {
e.preventDefault();
let total = 0;
for (let i = 0; i < inputs.length; i++) {
total += Number(inputs[i].value);
}
const avg = total / inputs.length;
output.textContent = `Total: ${total}, Avg: ${avg}`;
}
</script>
</body>
</html>
当脚本执行时，它将生成一个输出，其中包含一个输入字段供用户输入值以及点击按钮。当用户点击按钮时，事件被触发并显示值的总和以及它们之间的平均值。
示例
让我们再看一个将 JavaScript 函数作为 HTML 结果显示的示例。
<!DOCTYPE html>
<html>
<body style = "text-align: center;">
<h1 style = "color: red;"> Hello World</h1>
<button onclick = "fun()"> Click me</button>
<p id = "tutorial"></p>
<script>
function fun() {
var a = prompt("Enter some text");
if (a != null) {
document.getElementById("tutorial").innerHTML = "Welcome to " + a;
}
}
</script>
</body>
</html>
运行上述脚本后，文本以及点击按钮将显示在 Web 浏览器上。如果用户点击按钮，则事件被触发，显示一个警报提示，并要求用户输入文本并按确定。按下确定后，用户输入的文本将显示在网页上。
示例
考虑一个我们正在运行脚本以将函数的结果显示为 HTML 的示例。
<!DOCTYPE html>
<html>
<body>
<h1>Click Button To Count CheckBoxes</h1>
<button id="doit">Do it</button><br />
<input type="checkbox">
<input type="radio">
<input type="checkbox">
<input type="text">
<input type="checkbox">
<div id="totalInput"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('doit').addEventListener('click',
function() {
check_total();
});
});
function check_total()
{
var inputElems = document.getElementsByTagName("input"),
total = 0;
for (var i=0; i<inputElems.length; i++) {
if (inputElems[i].type == "checkbox"){
total++;
}
}
document.getElementById('totalInput').innerHTML = total;
}
</script>
</body>
</html>
当脚本执行时，它将生成一个输出，其中包含文本以及复选框、单选按钮、文本字段和网页上的点击按钮。当用户点击按钮时，会触发一个事件，该事件检查复选框的数量并在网页上显示它们。
更新于: 2023年1月18日
3K+ 次浏览
广告