通过点击html按钮更新html页面上的javascript变量

Updating javascript variable on html page through html button click?

本文关键字：html 变量 javascript 更新 按钮      更新时间：2023-09-26

我正在制作一个基本程序，向用户显示当前室温以及文本字段和"设置"按钮，以便他们可以设置所需的室温。我想做的是，当用户在文本字段中输入一个数字并点击Set按钮时，它会将"roomTemp"变量更改为他们想要的温度，也称为"desiredTemp"，并将其显示为当前温度。我不认为它达到了save（）函数，因为当按钮被点击时，我的控制台中什么都没有打印出来，而它应该向我的控制台输出"温度正在变化！"。

Javascript文件：

var http = require('http');
var ejs = require('ejs');
var fs = require('fs');
var roomTemp = 20;
var desiredTemp = 0;
http.createServer(function(req,res) {
  res.writeHead(200, {'Content-Type': 'text/html'});
  //since we are in a request handler function
  //we're using readFile instead of readFileSync
  fs.readFile('index.html', 'utf-8', function(err, content) {
    if (err) {
      res.end('error occurred');
      return;
    }
    var renderedHtml = ejs.render(content, {roomTemp: roomTemp});  //get redered HTML code
    res.end(renderedHtml);
  });
}).listen(3000, "127.0.0.1");
console.log('Server Running at http://127.0.0.1:3000  CNTL-C to quit');

HTML文件：

<!DOCTYPE html>
<html>
<head>
<script src="Thermostat.js"></script>
</head>
<body>
Current Temp: <%= roomTemp %> <br></br>
<form>
Desired Room Temperature: <input type="number" id="desTemp" name="roomTempDes"><br></br>
<button onclick="save(document.getElementById("roomTempDes").value)">Set</button>
</form>
<script>
function save(desiredTemp) {
      roomTemp = desiredTemp;
      console.log("Temperature is changing!");
}
</script>
</body>
</html>

脚本中的引号太多。

"save(document.getElementById("roomTempDes").value)"

应该是

"save(document.getElementById('roomTempDes').value)"

您的代码被错误引用并且您的ID错误。

<button onclick="save(document.getElementById('desTemp').value)">Set</button>
相关文章：