如何使用加载事件处理程序作为输入类型值答案

【问题标题】：How to use a load event handler as input type value如何使用加载事件处理程序作为输入类型值
【发布时间】：2025-11-30 00:55:01
【问题描述】：

我有一个 JavaScript 函数，它在页面加载时打印 10。

代码如下：

<body onload='loadData()'>
<div id="display"></div>

上述函数在页面加载时显示“10”。但它显示在页面顶部。

但我想将“10”显示为我的 html 表中名为“Test Title 2”的行的输入值。

function calcule2() {
  var i = 0;
  for (i = 0; i <= 2; i++) {
    calcule();
  }
}

function calcule() {
  Good2Paint.D11.value = (Math.round((parseFloat(Good2Paint.D13.value) * 11.664) * 100)) / 100;
  Good2Paint.D15.value = (Math.round((parseFloat(Good2Paint.D11.value) / 16) * 100)) / 100;
}

function loadData() {
  var url = "https://docs.google.com/spreadsheets/d/e/<Sheet ID>/pub?gid=0&single=true&range=B2&output=csv";
  xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      document.getElementById("display").innerHTML = xmlhttp.responseText;
    }
  };
  xmlhttp.open("GET", url, true);
  xmlhttp.send(null);
}

<body onload='loadData()'>
  <div id="display"></div>
  <form name="Good2Paint">
    <table border="0" margin="0" padding="0" cellspacing="0" cellpadding="0">
      <tr height=" 23.994px;" style="border:0px;">
        <td style="height:20px; width: 110.522px; background-color:#A6A6A6; border-top: 0px; border-bottom: 0px; border-right: 0px; border-left: 0px; font-size: 16px; font-family:Arial; color:#FFFFFF; text-align: left; ">Test Title 1</td>
        <td style="height:20px; width: 154.322px; background-color:#A6A6A6; border-top: 0px; border-bottom: 0px; border-right: 0px; border-left: 0px; font-size: 16px; font-family:Arial; color:#000000; text-align: right; ">

          <input type="text" onchange="calcule2()" name="D11" value="0" size="8" disabled="disabled" style="background-color: transparent; border:0px; height: 23.994px; width: 154.322px; text-align: right; font-size: 16px; font-family:Arial; color:#000000; "></td>
      </tr>
      <tr height=" 11.997px;" style="border:0px;">
        <td style="height:20px; width: 110.522px; background-color:#FFFFFF; border-top: 0px; border-bottom: 0px; border-right: 0px; border-left: 0px; font-size: 16px; font-family:Arial; color:#000000; text-align: left; "></td>
        <td style="height:20px; width: 154.322px; background-color:#FFFFFF; border-top: 0px; border-bottom: 0px; border-right: 0px; border-left: 0px; font-size: 16px; font-family:Arial; color:#000000; text-align: right; "></td>
      </tr>
      <tr height=" 23.994px;" style="border:0px;">
        <td style="height:20px; width: 110.522px; background-color:#A6A6A6; border-top: 0px; border-bottom: 0px; border-right: 0px; border-left: 0px; font-size: 16px; font-family:Arial; color:#FFFFFF; text-align: left; ">Test Title 2</td>
        <td style="height:20px; width: 154.322px; background-color:#A6A6A6; border-top: 0px; border-bottom: 0px; border-right: 0px; border-left: 0px; font-size: 16px; font-family:Arial; color:#000000; text-align: right; ">

          <input type="text" onchange="calcule2()" name="D13" value="0" size="8" style="background-color: transparent; border:0px; height: 23.994px; width: 154.322px; text-align: right; font-size: 16px; font-family:Arial; color:#000000; "></td>
      </tr>
      <tr height=" 11.997px;" style="border:0px;">
        <td style="height:20px; width: 110.522px; background-color:#FFFFFF; border-top: 0px; border-bottom: 0px; border-right: 0px; border-left: 0px; font-size: 12px; font-family:Arial; color:#000000; text-align: left; "></td>
        <td style="height:20px; width: 154.322px; background-color:#FFFFFF; border-top: 0px; border-bottom: 0px; border-right: 0px; border-left: 0px; font-size: 12px; font-family:Arial; color:#000000; text-align: right; "></td>
      </tr>
      <tr height=" 23.994px;" style="border:0px;">
        <td style="height:20px; width: 110.522px; background-color:#A6A6A6; border-top: 0px; border-bottom: 0px; border-right: 0px; border-left: 0px; font-size: 16px; font-family:Arial; color:#FFFFFF; text-align: left; ">Test Title 3</td>
        <td style="height:20px; width: 154.322px; background-color:#A6A6A6; border-top: 0px; border-bottom: 0px; border-right: 0px; border-left: 0px; font-size: 16px; font-family:Arial; color:#000000; text-align: right; ">

          <input type="text" onchange="calcule2()" name="D15" value="0" size="8" disabled="disabled" style="background-color: transparent; border:0px; height: 23.994px; width: 154.322px; text-align: right; font-size: 16px; font-family:Arial; color:#000000; "></td>
      </tr>
    </table>
  </form>
</body>

【问题讨论】：

首先输入的值是纯文本，当你写value="<div id="display"></div>"它会将html显示为字段值而没有解释
@jeremy-denis 是的，它显示的是 html 代码而不是结果。但实际上我想显示结果。我希望 html 能够正确执行并将“10”显示为值。这就是我在 * 中创建这个问题的原因。如果可以，请提供帮助。

标签： javascript html

【解决方案1】：

换行：

document.getElementById("display").innerHTML = xmlhttp.responseText;

与：

const element = document.querySelector("input[name='D13']");
element.value = xmlhttp.responseText.trim();
element.dispatchEvent(new Event("change"));

Document.querySelector() - Web APIs | MDN
String.prototype.trim() - JavaScript | MDN
Creating and triggering events - Event reference | MDN

【讨论】：

谢谢，那里正在显示价值。但是在值之前有一个可用的前导空间。截图：prnt.sc/22gzntq 能否请您删除前导空格？我只是想值。这样该值将用作数字，并且可以使用javascript数学进行计算。
@planpoint 你应该只需要在设置之前trim 文本。
值“10”前有一个空格。你能把它去掉吗？请帮忙。不确定我之前的评论是否已发送给您。再次感谢。
@planpoint 我已经回复了您之前的评论。 :)
先生，它就像一个魅力！你是一个真正的人，以积极的态度帮助人们。我非常感谢您的宝贵时间，非常感谢您的大力帮助。我会接受你的回答。