CODEWITHSUNDEEP
javascript
HunterXxX
HunterXxX

Reputation: 31

changing a value of a textbox in javascript

I am working on a website that one of his functionalities is to calculate the user GPA. So, I made the user enter the courses dynamically and enter the grade and the credit hour of each course. This is the 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>

Whenever the user enters a new course, four boxes will appear: 1-course name 2- Grade (by numbers) 3- drop down list contain the grades (A+, A, B+, B....etc). 4- credit hours

I want that when the user enters A+ for example, the second box's value changed to 95 and when he enters A, the value changed to 90 and so on. It worked for me whenever I enter ONE course only but when the user enter two courses and changes the value of the second course, THE VALUE OF THE FIRST course changed.

Any one has a solution to this problem??

Upvotes: 0

Views: 71

Answers (1)

Ionut Necula
Ionut Necula

Reputation: 11480

You need to add the backticks arround those multiple lines and you can select the prev element with previousElementSibling to change the value, and also to preserve the last element when you insert a new one use insertAdjacentHTML instead of innerHTML:

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>

Upvotes: 1

Related Questions