オンチッチをクリックしても何も起こらない

Question

Q1、E2、T3のデータを選択すると、A4とAveのデータは変更されません。私はすべての入力と選択タグでonchange属性を持っています。

function calc(Q1id, E2id, T3id, distroid, A4id, Aveid,) { 
 
    var Q1 = parseInt(document.getElementById(Q1id).value); 
 
    var E2 = parseInt(document.getElementById(E2id).value); 
 
    var T3 = parseInt(document.getElementById(T3id).value); 
 
    var distro = parseInt(document.getElementById(distroid).value); 
 

 
    var result = parseFloat(distro)/100; 
 

 
    var ratingAve = document.getElementById(A4id).value = parseFloat(Math.round(Q1 + E2 + T3)/3).toFixed(2); 
 

 
    document.getElementById(Aveid).value = parseFloat(ratingAve * result).toFixed(2); 
 

 
}

<form action="{{route('notes.update',$note->id)}}" method="POST"> 
 
    {{csrf_field()}} {{method_field('PUT')}} 
 
    <div class="form-group"> 
 
    <label for="body"> 
 
\t \t \t \t \t Q1 
 
\t \t \t \t </label> 
 
    <select name="Q1" id="Q1" onchange="calc('Q1','E2','T3','distro','A4','Ave')" value="{{$note->Q1}}> 
 
\t \t    <option value=" 0 ">0</option> 
 
\t \t    <option value="1 ">1</option> 
 
\t \t    <option value="2 ">2</option> 
 
\t \t    <option value="3 ">3</option> 
 
\t \t    <option value="4 ">4</option> 
 
\t \t    <option value="5 ">5</option> 
 
\t \t   </select> 
 
       <label for="body "> 
 
\t \t \t \t \t E2 
 
\t \t \t \t </label> 
 
\t \t \t \t <select name="E2 " id="E2 " onchange="calc('Q1', 'E2', 'T3', 'distro', 'A4', 'Ave') " value="{{$note->E2}}> 
 
    <option value="0">0</option> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
    <option value="4">4</option> 
 
    <option value="5">5</option> 
 
    </select> 
 
    <label for="body"> 
 
\t \t \t \t \t T3 
 
\t \t \t \t </label> 
 
    <select name="T3" id="T3" onchange="calc('Q1','E2','T3','distro','A4','Ave')" value="{{$note->T3}}> 
 
\t \t    <option value=" 0 ">0</option> 
 
\t \t    <option value="1 ">1</option> 
 
\t \t    <option value="2 ">2</option> 
 
\t \t    <option value="3 ">3</option> 
 
\t \t    <option value="4 ">4</option> 
 
\t \t    <option value="5 ">5</option> 
 
\t \t   </select> 
 
\t \t </div> 
 
     <div class="form-group "> 
 
\t \t   <label for="body "> 
 
\t \t    A4 
 
       </label> 
 
\t    <input class="form-control " type="text " name="A4 " placeholder="A4 " id="A4 " readonly onchange="calc('Q1', 'E2', 'T3', 'distro', 'A4', 'Ave') " value="{{$note->A4}}"> 
 
    </div> 
 
    <div class="form-group"> 
 
    <label for="body"> 
 
\t \t    Ave 
 
       </label> 
 
    <input class="form-control" type="text" name="Ave" placeholder="Average" id="Ave" readonly onchange="calc('Q1','E2','T3','distro','A4','Ave')" value="{{$note->Ave}}"> 
 
    </div> 
 
    <input class="btn btn-primary" type="submit" value="Done"> 
 
</form>

は、私は、E2、T3 Q1の値を変更したときに自動的にA4とアベニューの値を変更したいです。

Answer 1

Uncaught TypeError: Cannot read property 'value' of null

...、あなたは（あなたの値はdistroid変数に渡している）ID distroを持つ要素...やタイプミスのように見えるように十分にそのようなidを持つ要素でもありません。

存在しない要素から値を読み取ることはできません。