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

Question

I want to set checkbox after the page has renderet to the matching state of the backend.

I implemented this function for that purpose what does the job so far

Updated to user-suggestion It doesn't matter if cbs[i].dataset.thvalue or 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 part, using Thymeleaf

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

But the browser claims by printing out the value, that it is undefined, even if the value is set as you can see in the picture live from the browser.

Due to the docu my syntax should be correct?

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

Any suggestion?

Ty

Answer 1

You HTML is invalid.

<td> elements do not have value attributes. (The link you reference is talking about <option> , not <td> ).

Your browser is not mapping the JS value property onto your invented attribute.

If you want to add arbitrary data to an element, use a data-* attribute and read it using the dataset API .

Answer 2

It looks like my misunderstanding of the Thymeleaf syntax with regards to th-data led to that issue.

This is the fix:

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

Access via

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

Answer 3

value is not valid attributes in td tag. you can use abbr attributes

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

then you can get it

console.log(cbs[i].abbr)

Note: The abbr attribute is not supported in HTML5.

For HTML5 you can use headers attributes

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

then you can get it

console.log(cbs[i].headers)