How to run my function in a other function-CodePudding

How to run function in another function? My program should display an output when the user enters a number and presses the submit button.

I would like to also know how to format the output text to display the users name.

How to make my code more readable? Like removing unneeded if statements I would like this so my code will run faster in the browser.

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

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');


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

function markChecker() {

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

  element = document.createElement('div')

  chemistrys();
  physics();
}

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



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

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

define num1 - num5 outside the function with either var or let. This will make them available to all your functions and you won't have to pass them as parameters. In terms of making your code more readable some would argue you should use a switch statement. A much better solution would be to have just one grading function (as oppose to a function for each subject) and pass in two parameters, grade and subject.

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

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;

const 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);

  element = document.createElement('div')

  chemistrys();
  physics();
}

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



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

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

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

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;

const 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);

  element = document.createElement('div')

  chemistrys();
  physics();
}

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



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

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

here a way more simple and more conventional

<form>
  <label>
    <input name="firstName" placeholder="Enter first name" type="text" required>
  </label>
  <label>
    <input name="secondName" placeholder="Enter last name" type="text" required>
  </label>
  <label>
    <input name="physic" placeholder="Enter your mark out of 100" type="number" min="0" required>
  </label>
  <label>
    <input name="chemistry" placeholder="Enter your mark out of 100" type="number" min="0" required>
  </label>
  <label>
    <input name="biology" placeholder="Enter your mark out of 100" type="number" min="0" required>
  </label>
  <label>
    <input name="mathematics" placeholder="Enter your mark out of 100" type="number" min="0" required>
  </label>
  <label>
    <input name="computer" placeholder="Enter your mark out of 100" type="number" min="0" required>
  </label>
  <button type="submit">valider</button>
</form>

I console only one field for example, for the other use the attr name of the input, not the id

window.addEventListener("load", function() {
  document.querySelector("form").addEventListener("submit", function(e) {
    e.preventDefault()
    const form = e.target
    console.log(parseInt(form.physic.value))
  })
})

css opacity of submit button to show if the form is valid or not

form:invalid button[type="submit"], form:invalid input[type="submit"] {
  opacity: 0.5;
  cursor: default;
}

CodePudding user response：

It is generally not a good idea to use inline event handlers.

Let's do this for 2 grades (say, a minimal reproducable example), using event delegation to handle the button click.

document.addEventListener(`click`, handle);

function checkMarks() {
  const physicsMark = parseInt(document.querySelector(`#physic`).value);
  const chemistryMark = parseInt(document.querySelector(`#chemistry`).value);
  const grade = num =>
    num >= 90 ? `A, well done` :
    num >= 80 ? `B, great` :
    num >= 70 ? `C, looks good` :
    num >= 60 ? `that's a D, you can do better` : 
      `that's an F, try harder next time!`;

  document.querySelector(`#store`).insertAdjacentHTML(`beforeend`,
    `<div>Physics grade: ${grade(physicsMark)}</div>
    <div>Chemistry grade: ${grade(chemistryMark)}</div>`);
}

function handle(evt) {
  if (evt.target.id === `checkMarks`) {
    return checkMarks();
  }
}

<div>
  <input id="firstName" placeholder="Enter first name" type="text">
  <input id="secondName" placeholder="Enter last name" type="text">
</div>

<p>
  <input id="physic" placeholder="Enter your mark out of 100" 
    type="number" min="0" max="100" step="5" value="10">
  <b>Physics</b>
</p>

<p>
  <input id="chemistry" placeholder="Enter your mark out of 100" 
    type="number" min="0" max="100" step="5" value="10">
  <b>Chemistry</b>
</p>

<p>
  <button id="checkMarks">Submit</button>
</p>

<p id="store"></p>

CodePudding user response：

use Prettier plugin to make your code readable
assign handlers in Javascript, not in HTML
use addEventListener method instead of assigning to onClick

and you are calling store.appendChild(element) in any case, so move it outside if-statement:

before:

{
  ...
  if (...) {
    ...
    store.appendChild(...);
  } else if (...) {
    ...
    store.appendChild(...);
  } else if (...){
    ...
    store.appendChild(...);
  }
  ...
}

after:

{
  ...
  if (...) {
    ...
  } else if (...) {
    ...
  } else if (...){
    ...
  }
  store.appendChild(...);
  ...
}

What about your multiple if else logic you should think about it in more recursive way.