Ändern eines Wertes eines Textfelds in Javascript

Question

Ich arbeite an einer Website, die eine seiner Funktionen ist, um den Benutzer GPA zu berechnen. Also ließ ich den Benutzer die Kurse dynamisch eingeben und die Note und die Credit-Stunde jedes Kurses eingeben. Dies ist der Code:

 var countBox = 1; 
 
     var boxName = 0; 
 

 
     function addCourse() { 
 
     var box1Name = "Course " + countBox; 
 
     var box2Name = "Grade "; 
 
     var box4Name = "Hours "; 
 
     document.getElementById('responce').innerHTML += <br/> 
 
     <input type="text" + box1Name + " " + value=" " + box1Name + " " /> 
 
     <input type="text" id="box2Name" + box2Name + " " + value= " " + box2Name + " "/> 
 
     <select onchange="ChooseContact(this)" style="margin-right: 0.5em";> 
 
      <option value="95">A+ </option> 
 
      <option value="90">A </option> 
 
      <option value="85">B+ </option> 
 
      <option value="80">B </option> 
 
      <option value="75">C+ </option> 
 
      <option value="70">C </option> 
 
      <option value="65">D+ </option> 
 
      <option value="60">D </option> 
 
      <option value="59">F </option > 
 
     </select ><input type="text" + box4Name + " " value= " " + box4Name + " " /> <br/>'; 
 
     countBox += 1; 
 
     } 
 

 
     function ChooseContact(data) { 
 

 
     document.getElementById("box2Name").value = data.value; 
 

 
     }

<button type="submit" onclick="addCourse()">Add New Course</button> 
 
<br></br> 
 

 
<span id="responce"></span>

Jedes Mal, wenn der Benutzer einen neuen Kurs eintritt, werden vier Felder angezeigt: 1-Gang-Name 2- Grade (nach Zahlen) 3- Dropdown-Liste enthalten die Noten (A +, A, B +, B .... usw.). 4 Stunden

Ich möchte, dass wenn der Benutzer A + zum Beispiel, der Wert der zweiten Box auf 95 geändert wird und wenn er A eingibt, ändert sich der Wert in 90 und so weiter. Es funktionierte für mich, wenn ich nur EINEN Kurs betrete, aber wenn der Benutzer zwei Kurse eingibt und den Wert des zweiten Kurses ändert, änderte sich der Wert des ersten Kurses.

Jeder hat eine Lösung für dieses Problem?

Answer 1

Sie müssen die Backticks rund um diese mehr Zeilen hinzufügen und Sie können das i.Vj. Element mit previousElementSibling wählen Sie den Wert zu ändern, und auch das letzte Element zu erhalten, wenn Sie einen neuer insertAdjacentHTMLinnerHTML statt verwenden einfügen:

var countBox =1; 
 
    var boxName = 0; 
 
    function addCourse() 
 
    { 
 
    var box1Name="Course "+countBox; 
 
    var box2Name="Grade "; 
 
    var box4Name="Hours "; 
 
    document.getElementById('responce').insertAdjacentHTML('beforeend', `<br/> 
 
    <input type="text" id="'+box1Name+'" value="'+box1Name+'" " /> 
 
    <input type="text" id="box2Name"'+box2Name+'" value="'+box2Name+'" "/> 
 
    <select onchange="ChooseContact(this)" style="margin-right: 0.5em";> 
 
     <option value="95">A+ </option> 
 
     <option value="90">A </option> 
 
     <option value="85">B+ </option> 
 
     <option value="80">B </option> 
 
     <option value="75">C+ </option> 
 
     <option value="70">C </option> 
 
     <option value="65">D+ </option> 
 
     <option value="60">D </option> 
 
     <option value="59">F </option > 
 
    </select ><input type="text" id="' + box4Name + '" value="' + box4Name + '" /> <br/>`); 
 
countBox += 1; 
 
} 
 

 
    function ChooseContact(data) { 
 
    data.previousElementSibling.value = data.value; 
 
    }

<button type="submit" onclick="addCourse()">Add New Course</button> 
 
<span id="responce"></span>