How to detect "+" in JavaScript and convert it to a number?

Question

I have a script like this

let x;
let y;
let z;
let obliczone;


document.getElementById("srednia").onclick = function() {
  x = document.getElementById("grade1").value;
  y = document.getElementById("grade2").value;
  z = document.getElementById("grade3").value;

  x = Number(x);
  y = Number(y);
  z = Number(z);
  obliczone = Number(obliczone);

  obliczone = (x + y + z) / 3;
  console.log(obliczone);
  document.getElementById("wynik").innerHTML = "Twoja średnia to " + obliczone;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="main.css">
  <title>Document</title>
</head>

<body>
  <label>Ocena 1</label> <input type="text" id="grade1"><br>
  <label>Ocena 2</label> <input type="text" id="grade2"><br>
  <label>Ocena 3</label> <input type="text" id="grade3"><br>
  <label>Oblicz: </label> <button id="srednia">Średnia</button>

  <p id="wynik"></p>
  <script src="index.js"></script>
</body>

</html>

and if user type in a number with "+" like 2+ I want i to give me 2.5 value and if the input is higher than 6 to break the function. It meant to calculate arithmetic mean of 3 digits and as I wrote earlier it should change ex. 1+ to 1.5

Franco Torres · Accepted Answer · 2022-10-24 18:07:41Z

By default when the JavaScript interpreter tries to cast the string to a number and this string contains a symbol it results in a NaN (Not a Number). You can do what you want by replacing the '+' symbol with '.5'.

The new code:

  let x;
  let y;
  let z;
  let obliczone;


  document.getElementById("srednia").onclick = function () {
    x = document.getElementById("grade1").value;
    y = document.getElementById("grade2").value;
    z = document.getElementById("grade3").value;
    const doesXEndsWithPlus = x.endsWith('+')
    const doesYEndsWithPlus = y.endsWith('+')
    const doesZEndsWithPlus = z.endsWith('+')
    if (doesXEndsWithPlus) x = x.replace('+', '.5')
    if (doesYEndsWithPlus) y = y.replace('+', '.5')
    if (doesZEndsWithPlus) z = z.replace('+', '.5')
    x = Number(x);
    y = Number(y);
    z = Number(z);
    obliczone = Number(obliczone);

    obliczone = (x + y + z) / 3;
    console.log(obliczone);
    document.getElementById("wynik").innerHTML = "Twoja średnia to " + obliczone;
  }

oalva-rez · Accepted Answer · 2022-10-24 18:51:58Z

This is one way you can do it however if you end up putting more than 3 inputs it can start getting repetitive.

document.getElementById("srednia").onclick = function(){
   let obliczone;
   let x = document.getElementById("grade1").value;
   let y = document.getElementById("grade2").value;
   let z = document.getElementById("grade3").value;
   
   if (x.includes('+')) {
      x = parseFloat(x.split("+")[0] + ".5")
   }
   if (y.includes('+')) {
      y = parseFloat(y.split("+")[0] + ".5")
   }
   if (z.includes('+')) {
      z = parseFloat(z.split("+")[0] + ".5")
   }
   
    
    obliczone = (x+y+z) / 3;
    console.log(obliczone);
    document.getElementById("wynik").innerHTML = "Twoja średnia to " + obliczone; 
}

One solution to make it cleaner and more dynamic is to create a helper function formatNumInput(input):

function formatNumInput(input) {
   let newNum;
   if (input.includes('+')) {
      newNum = parseFloat(input.split("+")[0] + ".5")
   } else {
   newNum = parseFloat(input)
   }
   return newNum
}

document.getElementById("srednia").onclick = function(){
   let obliczone;
   let x = document.getElementById("grade1").value;
   let y = document.getElementById("grade2").value;
   let z = document.getElementById("grade3").value;
   
   x = formatNumInput(x)
   y = formatNumInput(y)
   z = formatNumInput(z)

   
    
    obliczone = (x+y+z) / 3;
    console.log(obliczone);
    document.getElementById("wynik").innerHTML = "Twoja średnia to " + obliczone; 
}

Deotyma · Accepted Answer · 2022-10-24 22:07:10Z

I would like to propose you something a little bit different that could to inspired you and where are not you are not limited only to 3 values of ratings:

//here I define some globals variables
let evaluation = document.getElementById('eval');
let evaluations = [];
let showEval =  document.getElementById("evaluation");
let addEval = document.getElementById("addEval");
let average = 0

function showEvals (){
    for (let i = 0; i < evaluations.length; i++) {
        showEval.innerHTML += `<span>${evaluations[i]}</span>, ` 
    };
};// this is a function to show ratings

function countAverage () {
    let sum = 0
   for (let i = 0; i < evaluations.length; i++) {
    const rating = parseFloat(evaluations[i],10)//here I convert a string go float (Numners() create variable type object not type number
       sum += rating
       average = (sum/evaluations.length).toFixed(2)// I limited my float to 2 digits 
       
    };
    document.getElementById("result").innerHTML = "Twoja średnia to " + average
  } // this function counts and shows average

  addEval.onclick = function(){
    evaluations.push(evaluation.value)
    showEval.innerHTML = [];
    showEvals();
    countAverage();
};// here new rangs is pushed to the array of evaluations and it calls ather functions

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="script.js" defer></script>
</head>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="script.js" defer></script>
</head>
<body>
    <label for="eval">Dodaj ocene:</label>

    <select name="evals" id="eval">
        <option value="1">1</option>
        <option value="1.5">1+</option>
        <option value="2">2</option>
        <option value="2.5">2+</option>
        <option value="3">3</option>
        <option value="3.5">3+</option>
        <option value="4">4</option>
        <option value="4.5">4+</option>
        <option value="5">5</option>
        <option value="5.5">5+</option>
        <option value="6">6</option>
    </select>
</select>
<button id="addEval">Dodaj ocene</button>
<h2>Twoje oceny to:</h2>
<div id="evaluation"></div>

<p id="result"></p>

</body>
</html>

Collectives™ on Stack Overflow

How to detect "+" in JavaScript and convert it to a number?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related