Question

未捕获的类型错误无法在 javascript 中读取 null 属性（读取“值”）

2021-12-06

4352

javascript html onclick onchange

我收到错误“未捕获的类型错误无法读取 null 的属性（读取‘值’）”我一直在寻找解决方案，但我不知道代码中出了什么问题，你能帮助我吗？

我的代码

function test(){

for(var i=0; i < 40; i++) {
var name1.value = document.getElementsByClassName('test1')[i];
var address1.value = document.getElementsByClassName('test2')[i];

if( name1.value == "test4"){
address1.value = "test5";
}
else if (name1.value == "test6"){
address1.value = "test7";
}
else if (name1.value == "test8"){
address1.value = "test9";
}
}
}

< div class="form grup test1">
< labe for="power-full.names"> Names full</lable>
< input name="power-full.names" list="power-full.names" type="text"
class="form grup test1" onclick="test"(this)">
<datalist type"text" id="power-full.names">
<option value="test4">
<option value="test6">
<option value="test8">
</datalist>
</div>


< div class="form grup test2">
< labe for="power-full.adress"> Adress full</lable>
< input name="power-full.adress" list="power-full.adress" type="text"
class="form grup test2" onclick="test"(this)">
<datalist type"text" id="power-full.adress">
<option value="test5">
<option value="test7">
<option value="test9">
</datalist>
</div>

Answer 1

您忘记添加类，因此 document.getElementsByClassName('test1')[i] 返回 None。并且 javascript 无法读取 None 的 value 属性。修复方法 -

<option class="test1" value="test4">

Answer 2

首先：也许您应该使用 onchange 事件来绑定 input.test1 。

function test1(ele){
  var address1 = document.getElementById('test2');

  if( ele.value == "test4"){
    address1.value = "test5";
  } else if (ele.value == "test6"){
    address1.value = "test7";
  } else if (ele.value == "test8"){
    address1.value = "test9";
  }
}

<div class="form grup test1">
  <lable for="power-full.names"> Names full</lable>
  <input name="power-full.names" list="power-full.names" type="text"
    class="form grup test1" onchange="test1(this)">
  <datalist type"text" id="power-full.names">
    <option value="test4">
    <option value="test6">
    <option value="test8">
  </datalist>
</div>


<div class="form grup test2">
  <lable for="power-full.adress"> Adress full</lable>
  <input id="test2" name="power-full.adress" list="power-full.adress" type="text"
  class="form grup test2">
  <datalist type"text" id="power-full.adress">
    <option value="test5">
    <option value="test7">
    <option value="test9">
  </datalist>
</div>