如何正确实现HTML值传递至JS并完成表格单元格着色？

问题修复要点 #

1. 按钮点击事件未正确触发函数 #

按钮的onClick属性写成了Complete;，这只是引用函数而非执行，需要改成Complete()才能调用函数：

<input TYPE="button" value="Готово" onClick="Complete()">

2. 输入框SIZE属性格式错误 #

输入框的SIZE=2 0是无效写法，空格会被解析为两个独立属性，修正为SIZE="20"：

<input name="values" SIZE="20" onblur="this.value=this.value.toUpperCase()">

3. 移除页面加载时的自动函数调用 #

脚本末尾直接调用Complete()会在页面加载时触发，此时输入框为空值，document.getElementById(fm)返回null，执行element.style.background会抛出错误，删除这个自动调用即可。

4. 增加元素存在性判断（可选但推荐） #

为避免输入不存在的ID时报错，在设置样式前先判断目标元素是否存在：

function Complete() {
  if (typeof document !== "undefined") {
    let fm = document.sell.values.value
    let element = document.getElementById(fm)
    if (element) {
      element.style.background = 'black'
    }
  }
}

完整修复代码 #

JavaScript #

function Complete() {
  if (typeof document !== "undefined") {
    let fm = document.sell.values.value
    let element = document.getElementById(fm)
    if (element) {
      element.style.background = 'black'
    }
  }
}

HTML #

<form name="sell">
  <table>
    <tr>
      <td><b>ID: </b></td>
      <td><input name="values" SIZE="20" onblur="this.value=this.value.toUpperCase()"></td>
    </tr>
  </table>
  <input TYPE="button" value="Готово" onClick="Complete()">
</form>
<table border="1" cellspacing="0" cellpadding="3">
  <tr>
    <td id="11">11</td>
    <td id="12">12</td>
  </tr>
</table>

内容的提问来源于stack exchange，提问作者Warface2009