資料結構
網路
關係型資料庫管理系統
作業系統
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>
當指令碼執行時，它將生成一個輸出，其中包含文字以及複選框、單選按鈕、文字欄位和網頁上的點選按鈕。當用戶點選按鈕時，會觸發一個事件，該事件檢查複選框的數量並在網頁上顯示它們。
3K+ 次瀏覽
