Not taking value from name input box and not formatting string-CodePudding

I want my program to take the name value that the user has entered and add it to the string.When the user presses the submit button.I would like to know why its not letting the user enter this.

My program works by leting the user enter the grade that they have got and responding with a string that tell then how well the did.

var name1 = document.getElementById('firstName').value;
var name2 = document.getElementById('secondName').value;

const physic = document.getElementById('physic');
const chemistry = document.getElementById('chemistry');
const biology = document.getElementById('biology');
const mathematics = document.getElementById('mathematics');
const computer = document.getElementById('computer');

var num1,num2,num3,num4,num5;

let store = document.getElementById('store');

function markChecker() {

   num1 = parseInt(physic.value);
   num2 = parseInt(chemistry.value);
   num3 = parseInt(biology.value);
   num4 = parseInt(mathematics.value);
   num5 = parseInt(computer.value);

  

  grader(num1,'physics')
  grader(num2,'chemistry')
  grader(num3,'biology')
  grader(num4,'mathamatics')
  grader(num5,'computer science')
}


function grader(grade, subject) {
element = document.createElement('div')

  if (grade >= 90) {
    element.textContent = name1 ' got Grade A in '   subject   ' well done';
    store.appendChild(element)
  } else if (grade >= 80) {
    element.textContent = name1 'You got Grade B in '   subject   ' great mark';
    store.appendChild(element)
  } else if (grade >= 70) {
    element.textContent = name1 'You got Grade C in '   subject   ' got a good mark';
    store.appendChild(element)
  } else if (grade >= 60) {
    element.textContent = name1 'You got Grade D in '   subject ;
    store.appendChild(element)
  } else if (grade >= 40) {
    element.textContent = name1 'You got a Grade E in '   subject   ' try harder next time';
    store.appendChild(element)
  } else if (grade < 40) {
    element.textContent = name1 'You got Grade F in '   subject   ' get better or you will be a loser';
    store.appendChild(element)
  } 
 }

    <h1>Enter the mark for the student</h1>
        <input id="firstName"  placeholder="Enter first name" type="text">
       
        <input id="secondName"  placeholder="Enter last name" type="text">

    <div>        
        <p>Physics</p>
        <input id="physic"  placeholder="Enter your mark out of 100" type="number">
    </div>   
   
    <div>
        <p>Chemistry</p>
        <input id="chemistry"  placeholder="Enter your mark out of 100" type="number">
    </div>
   
    <div>   
        <p>Biology</p>
        <input id="biology"  placeholder="Enter your mark out of 100" type="number">
    </div>
   
    <div>
        <p>Mathematics </p>
        <input id="mathematics"  placeholder="Enter your mark out of 100" type="number">
    </div>
   
    <div>
        <p>Computer science</p>
        <input id="computer"  placeholder="Enter your mark out of 100" type="number">
    </div>
   
    <div>
   <button onclick="markChecker()">Submit</button>
    </div>
    
        <div id="store"></div>

CodePudding user response：

You need to grab the current value of the firstName field inside grader().

const
  firstName = document.getElementById('firstName'),
  lastName = document.getElementById('secondName'),
  physic = document.getElementById('physic'),
  chemistry = document.getElementById('chemistry'),
  biology = document.getElementById('biology'),
  mathematics = document.getElementById('mathematics'),
  computer = document.getElementById('computer'),
  store = document.getElementById('store');

function markChecker() {
  const
    num1 = parseInt(physic.value),
    num2 = parseInt(chemistry.value),
    num3 = parseInt(biology.value),
    num4 = parseInt(mathematics.value),
    num5 = parseInt(computer.value);

  grader(num1, 'physics')
  grader(num2, 'chemistry')
  grader(num3, 'biology')
  grader(num4, 'mathamatics')
  grader(num5, 'computer science')
}


function grader(grade, subject) {
  const element = document.createElement('div');

  if (grade >= 90) {
    element.textContent = `${firstName.value}, got an A in ${subject}. Well done.`;
  } else if (grade >= 80) {
    element.textContent = `${firstName.value}, got an B in ${subject}. Great mark.`;
  } else if (grade >= 70) {
    element.textContent = `${firstName.value}, got an C in ${subject}. Good mark.`;
  } else if (grade >= 60) {
    element.textContent = `${firstName.value}, got an D in ${subject}.`;
  } else if (grade >= 40) {
    element.textContent = `${firstName.value}, got an E in ${subject}. Try harder next time.`;
  } else if (grade < 40) {
    element.textContent = `${firstName.value}, got an F in ${subject}. You are flunking-out!`;
  }
  store.appendChild(element);
}

<h1>Enter the mark for the student</h1>
<input id="firstName" placeholder="Enter first name" type="text">
<input id="secondName" placeholder="Enter last name" type="text">
<div>
  <p>Physics</p>
  <input id="physic" placeholder="Enter your mark out of 100" type="number">
</div>
<div>
  <p>Chemistry</p>
  <input id="chemistry" placeholder="Enter your mark out of 100" type="number">
</div>
<div>
  <p>Biology</p>
  <input id="biology" placeholder="Enter your mark out of 100" type="number">
</div>
<div>
  <p>Mathematics </p>
  <input id="mathematics" placeholder="Enter your mark out of 100" type="number">
</div>

<div>
  <p>Computer science</p>
  <input id="computer" placeholder="Enter your mark out of 100" type="number">
</div>
<div>
  <button onclick="markChecker()">Submit</button>
</div>
<div id="store"></div>

Forms to the rescue!

Forms are easier to work with data. They also provided validation!

const
  firstNameEl = document.getElementById('firstName'),
  lastNameEl = document.getElementById('secondName'),
  storeEl = document.getElementById('store');

const parseFormValue = (form, name) => {
  try {
    return parseInt(form.elements[name].value, 10);
  } catch (e) {
    return 0;
  }
}

function handleSubmit(form) {
  grader(parseFormValue(form, 'physics'), 'Physics');
  grader(parseFormValue(form, 'chemistry'), 'Chemistry');
  grader(parseFormValue(form, 'biology'), 'Biology');
  grader(parseFormValue(form, 'mathematics'), 'Mathematics');
  grader(parseFormValue(form, 'computerScience'), 'Computer Science');

  return false; // Prevent page navigation!
}

function grader(grade, subject) {
  const element = document.createElement('div');

  if (grade >= 90) {
    element.textContent = `${firstNameEl.value}, got an A in ${subject}. Well done.`;
  } else if (grade >= 80) {
    element.textContent = `${firstNameEl.value}, got an B in ${subject}. Great mark.`;
  } else if (grade >= 70) {
    element.textContent = `${firstNameEl.value}, got an C in ${subject}. Good mark.`;
  } else if (grade >= 60) {
    element.textContent = `${firstNameEl.value}, got an D in ${subject}.`;
  } else if (grade >= 40) {
    element.textContent = `${firstNameEl.value}, got an E in ${subject}. Try harder next time.`;
  } else if (grade < 40) {
    element.textContent = `${firstNameEl.value}, got an F in ${subject}. You are flunking-out!`;
  }

  storeEl.appendChild(element);
}

form {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

.form-field {
  display: grid;
  grid-template-columns: 9rem 1fr;
}

.form-field label {
  font-weight: bold;
}

<h1>Student Grade Report</h1>
<form autocomplete="off" onsubmit="return handleSubmit(this)">
  <input id="firstName" placeholder="Enter first name" type="text" required="true">
  <input id="secondName" placeholder="Enter last name" type="text" required="true">
  <div >
    <label for="physics-input">Physics</label>
    <input id="physics-input" name="physics" placeholder="Enter your mark out of 100" type="number" required="true">
  </div>
  <div >
    <label for="chemistry-input">Chemistry</label>
    <input id="chemistry-input" name="chemistry" placeholder="Enter your mark out of 100" type="number" required="true">
  </div>
  <div >
    <label for="biology-input">Biology</label>
    <input id="biology-input" name="biology" placeholder="Enter your mark out of 100" type="number" required="true">
  </div>
  <div >
    <label for="mathematics-input">Mathematics </label>
    <input id="mathematics-input" name="mathematics" placeholder="Enter your mark out of 100" type="number" required="true">
  </div>
  <div >
    <label for="computer-science-input">Computer Science</label>
    <input id="computer-science-input" name="computerScience" placeholder="Enter your mark out of 100" type="number" required="true">
  </div>
  <button type="submit">Submit</button>
</form>
<hr />
<div id="store"></div>