如何使用 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>