如何使用 JavaScript 將變量的值傳遞給文本區域？

Question

這是我的代碼：如何使用 JavaScript 將變量的值傳遞給文本區域？ 感謝大家的幫助！

var overtimeRate = 1.5;
var regularHours = prompt("How many regular hours?");  
var overtime = prompt("How many overtime hours?");


var hourRate = prompt("What is the hour rate of pay?");
var overtimeRatePerHour = hourRate * overtimeRate;
var pay = regularHours * hourRate;
var overtimePay = overtime * overtimeRatePerHour;

function calculator() {
document.write(pay);
document.write('<br>');
document.write(overtimePay);
document.write('<br>');
document.write(overtimePay + pay);
}

document.getElementById("textarea").value = calculator();

Answer 1

創建一個填充 textarea 的函數。

function myFunction() {
  var result = pay + '\n' + overtimePay + '\n' + (overtimePay + pay);
  document.getElementById("textarea").value = result;
}

然后在 HTML 按鈕中的 onclick 事件上彈出它。

<button onclick="myFunction()">Click me</button>

Answer 2

重寫你的函數，比如

function calculator() {
    var output = pay + '<br />' + overtimePay + '<br />' + (overtimePay + pay);
    return output;
}

您需要的是返回一個值的函數，然后可以將其放入 textarea。

Answer 3

您的函數不應打印 (document.write)。 它應該返回這樣的文本：

var overtimeRate = 1.5;
var regularHours = prompt("How many regular hours?");  
var overtime = prompt("How many overtime hours?");


var hourRate = prompt("What is the hour rate of pay?");
var overtimeRatePerHour = hourRate * overtimeRate;
var pay = regularHours * hourRate;
var overtimePay = overtime * overtimeRatePerHour;

function calculator() {
    var ret = '';
    ret = ret + pay
    ret = ret + '<br>'
    ret = ret + overtimePay
    ret = ret + '<br>'
    ret = ret + overtimePay + pay;
    return ret;
}

document.getElementById("textarea").value = calculator();

Answer 4

使用 onclick 事件調用該函數。

<button onclick="myFunction()">Click Here</button>

Cyber​​Junkie 剛剛回答，但他們似乎刪除了它。

或者，您可以將 onchange 事件與某些輸入標簽一起使用。 這將使每次更改一個輸入時執行該功能。 您可以使用 document.getElementById('element_id').value，而不是 Javascript 提示。

<form name="myForm"> Regular Hours: <input type="text" onchange="myFunction()" id="regHrs" value="0"> Overtime Hours:<input type="text" onchange="myFunction()" id="overHrs" value="0"> Pay Rate:<input type="text" onchange="myFunction()" id="rate" value="0"> </form>