changing a value of a textbox in javascript

Question

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??

That code is syntactically invalid. You can’t have a multiline string within '…'. — Sebastian Simon
– Sebastian Simon, Commented Dec 9, 2016 at 15:44
you can't do multiline strings in javascript like that. you have to use a backtick instead of a single quote for multiline strings. — I wrestled a bear once.
– I wrestled a bear once., Commented Dec 9, 2016 at 15:45
You never looked at your console and realized you have syntax errors? Did you do any debugging at all? — Ruan Mendes
– Ruan Mendes, Commented Dec 9, 2016 at 15:46
The ids of your elements are not unique as soon as you add more than one course. I think this causes your problem. — retoheusser
– retoheusser, Commented Dec 9, 2016 at 15:46
I have changed the syntax. The syntax here is not the problem, I can solve it But can you see the other problem? — HunterXxX
– HunterXxX, Commented Dec 9, 2016 at 15:49

Ionut Necula · Accepted Answer · 2016-12-09 16:06:05Z

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>

Collectives™ on Stack Overflow

changing a value of a textbox in javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related