如何使用加載事件處理程式作為輸入型別值-有解無憂

我有一個 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>

uj5u.com熱心網友回復：

替換行：

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 API | MDN
String.prototype.trim() - JavaScript | MDN
創建和觸發事件 - 事件參考 | MDN

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/377891.html

標籤：javascript html

上一篇：HTMLjs如何檢查串列中是否存在名稱忽略大小寫并停止表單提交

下一篇：選擇建議后，輸入背景（影像）被洗掉