Document.GetElementById(VARIABLE) 不起作用，仅适用于字符串

Question

我使用一个复选框来激活一些 javascript，它应该从页面中获取一个元素并更改它。问题是当我使用 document.getElementID(x) 时它返回一个空值，但是当我用硬编码的 id 替换 x 时它工作正常。问题是我希望它不是硬编码的，因为页面是动态的。我已经检查了变量 x 是否已分配以及元素是否已分配了 ID。<script type="text/javascript">    function updateInputsLabels(e){        if(e.checked){            //If True            var value = 'quantity_' + e.value;            var x = document.getElementById(value);// this is what doesnt work unless I hard-code the ID value             console.log(x);        }else {            //if false            var cellUnchecked = document.getElementById(e.value);        }    }</script>

Answer 1

e.value 中有什么？

它不包含复选框的直接值。这工作正常

  console.log(e.value)

  var value = 'quant_' + 1;

  var x = document.getElementById(value);

  console.log(x, 'hello');

https://jsfiddle.net/5dom7wx8/16/

Answer 2

您应该分配一个更通用的事件侦听器，而不是像这里那样使用内联处理程序。如果使用querySelectorAll就不需要使用getElementById，这在很多情况下是非常不方便的。由于上面的 javascript 函数似乎还没有做太多，也许您可以尝试这样的方法

document.querySelectorAll('input[type="checkbox"]').forEach( chk=>{

    chk.addEventListener( 'click', function(e){

        if( this.checked ){

            alert( this.value )

        }

    })

});

Answer 3

尽管有代码本身，为了使它符合您的解释，您应该将要更改的输入（我假设）的 id 传递给方法 updateInputsLabels：

<td><input type="checkbox" name="product[]" value="<?=$row['product_id']?>" onchange="updateInputsLabels('<?=$row['product_id']?>')" checked></td>

并改变你的方法：

function updateInputsLabels(inputId){

    if(typeof inputId='string' && inputId.length > 0){

        let fullId = 'quantity_' + inputId;

        let element = document.getElementById(fullId );

        console.log(fullId );

    }else {

        console.error("not a string or empty");

    }

}