HTML 元素的值未定义但已设置答案

【问题标题】：value of HTML element is undefined but it is setHTML 元素的值未定义但已设置
【发布时间】：2019-01-02 04:13:59
【问题描述】：

我想在页面渲染后设置复选框到后端的匹配状态。

我为此目的实现了这个功能到目前为止的工作是什么

更新到用户建议不管是 cbs[i].dataset.thvalue 还是 cbs[i].dataset.value

 function updateCheckboxes () {

  let activeCheckbox = '<input type="checkbox" onclick="handleClickOnReduce()" checked>'
  let inactiveCheckbox = '<input type="checkbox" onclick="handleClickOnReduce()">'

  let cbs = document.getElementsByTagName('td')
  for (let i = 0; i < cbs.length; i++) {
    if (cbs[i].id === 'reduceCheckbox' || cbs[i].id === 'slCheckbox') {
      if (cbs[i].dataset.thvalue === 'true') {
        cbs[i].innerHTML = activeCheckbox
      }
      else {
        cbs[i].innerHTML = inactiveCheckbox
      }
    }
  }
}

HTML 部分，使用 Thymeleaf

    <td id="reduceCheckbox" data-th-value="${car.isReduced()}"></td>
    <td id="slCheckbox" data-th-value="${car.isSl()}"></td>

但浏览器通过打印出该值声称它是未定义的，即使该值已设置为您在浏览器中实时看到的图片。

由于文档，我的语法应该是正确的？

https://www.w3schools.com/jsref/prop_option_value.asp

有什么建议吗？

泰

【问题讨论】：

为什么不这样呢？ stackoverflow.com/a/29925235/5138198

标签： javascript thymeleaf

【解决方案1】：

您的 HTML 无效。

<td> 元素没有value 属性。（您引用的链接是在谈论<option>，而不是<td>）。

您的浏览器未将 JS value 属性映射到您发明的属性。

如果要向元素添加任意数据，请使用data-* attribute 并使用dataset API 读取它。

【讨论】：

感谢您的建议。我尝试并更新了我的代码，仍然有同样的问题：-/
当你连接数据（即数据值）时，你需要用驼峰式（第一个单词后的每个单词大写）来引用。因此，您应该参考：cbs[i].dataset.thValue NOT cbs[i].dataset.thvalue

【解决方案2】：

看来我对 Thymeleaf 语法关于 th-data 的误解导致了这个问题。

这是解决方法：

<td id="reduceCheckbox" th:attr="data-value=${car.isReduced()}"></td>

访问途径

 console.log(cbs[i].dataset.value)

【讨论】：

【解决方案3】：

value 不是 td 标记中的有效属性。你可以使用abbr属性

<td id="reduceCheckbox" abbr="true"> <input type="checkbox" onclick="handleClickOnReduce()"> </td>

那么你可以得到它

console.log(cbs[i].abbr)

注意：HTML5 不支持 abbr 属性。

对于 HTML5，您可以使用 headers 属性

<td id="reduceCheckbox" headers="true">
    <input type="checkbox" onclick="handleClickOnReduce()">
</td>

那么你可以得到它

console.log(cbs[i].headers)

【讨论】：