Input type number total and validation

I have developed a cooperative management system with hooks.

I am trying calculate the total of the input type number .

import React, { useState } from "react";

function PercentageQuestion(props) {
  const [col, setCol] = useState(2);
  const [total, setTotal] = useState(0);

  const handleTotal = () => {
    let inputs = document.querySelectorAll('[name ="qty"]');

    let totalVal = 0;

    for (var i = 0; i < inputs.length; i++) {
      totalVal += inputs[i].value;

      setTotal(totalVal);
    }
  };

  const width = {
    width: `${100 / col}%`,
  };

  const { onChange, question, values } = props;

  const { id, uiType, questionString, options } = question;

  return (
    <div>
      <div>
        <p className="quiz-title">{questionString}</p>

        <p className="quiz-info">
          <i className="fa fa-info-circle" aria-hidden="true"></i>{" "}
          <span>&nbsp;The sum of GRIP stages must total 100%.</span>
        </p>

        <div className="percentage-group" onChange={handleTotal}>
          {options.map((opt, index) => (
            <div key={index} style={width}>
              <span className="valuePadding input-holder">
                <input
                  id={opt.id}
                  className="input"
                  type="number"
                  name="qty"
                  min="0"
                  max="100"
                  onChange={onChange}
                  value={opt.value}
                  onblur={handleTotal}
                />
              </span>

              {opt.text}
            </div>
          ))}
          <span className="valuePadding input-holder">
            <input type="number" name="x" id="total" disabled />

            {total}
          </span>
          GRIP TOTAL
        </div>
      </div>
    </div>
  );
}

export default PercentageQuestion;

Hey there,

nice to meet you! :slightly_smiling_face:

I’ve edited your post for readability. When you enter a code block into a post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor ( </> ) to add backticks around text.

See this post to find the backtick on your keyboard. Backticks (`) are not single quotes (’).

If you want to show us your whole project, please use a service like codepen or codesandbox.io .

Hey there,

Can you describe what your for-loop does,
line by line?

Hey there,

Hi Mate i am new freecodecamp . Well what i am trying to do is first i used to have a variable called inputs which have a list of the document’s elements.

Trying to loop through the values and get the sum of all input.
and store them into the variable called “totalVal” and pass into setTotal().

thats what i tried

So when you enter some values into the Grip Stage boxes,
and log each input value in the for loop,
do you see the correct values in the logs?

1 Like

No mate . i have implemented from idea . i used to think that expected outcome should be here but while i check the total. I think my logic with the loop is incorrrect

Although you enter different numbers, it always shows only 0s.

Do you know when <div onChange={handleTotal}> runs?

1 Like

It fires the element when loaded. Which means the value of the element is changed then it fires

so sir what i need to do to resolve this issue?

What did you try since my last post?

And please, as stated above, use a service like codesandbox.io to show us your code. Also add stuff like the onChange method and some example data for options.

1 Like

ok . i Have attached the codesandbox link

I have attached the codesandbox

Alright, thanks for that.

So the initial value of total is the number 0.
What is the type of the value you add in the for loop to the total value?