import { Form, InputGroup, Button } from "react-bootstrap";
export default function About() {
---------------------> i want this function to perform addition but it is shown NaN even though i parseInt...........
**function add() {
let n1 = parseInt(document.getElementById("num1").value);
let n2 = parseInt(document.getElementById("num2").value);
document.getElementById("result").innerHTML = n1 + n2;
}**
return (
<> <h2>addition function</h2>
<div className="row">
<div className="col-6">
<InputGroup className="mb-3" id="num1">
<Form.Control
placeholder="number1" />
</InputGroup>
</div>
<div className="col-6">
<InputGroup className="mb-3" id="num2">
<Form.Control
placeholder="number2"
/>
</InputGroup>
</div>
<div className="col-6">
<InputGroup className="mb-3" id="res">
<Form.Control
placeholder="answer"
/>
</InputGroup>
</div>
<Button variant="dark" onClick={add} >Add</Button>
</div>
</>
);
}
You can introduce three state for numberOne, numberTwo and for total using useState hook as:
const [numberOne, setNumberOne] = useState(0);
const [numberTwo, setNumberTwo] = useState(0);
const [total, setTotal] = useState(0);
on click of button Add you just have to set total as value to setTotal as:
function add() {
setTotal(numberOne + numberTwo);
}
You can change input as of type number so tha user can only input of type number
<Form.Control
type="number"
placeholder="number1"
value={numberOne}
onChange={(e) => setNumberOne(+e.target.value)}
/>
FULL CODE
function About() {
const [numberOne, setNumberOne] = useState(0);
const [numberTwo, setNumberTwo] = useState(0);
const [total, setTotal] = useState(0);
function add() {
setTotal(numberOne + numberTwo);
}
return (
<>
<h2>addition function</h2>
<div className="row">
<div className="col-6">
<InputGroup className="mb-3" id="num1">
<Form.Control
type="number"
placeholder="number1"
value={numberOne}
onChange={(e) => setNumberOne(+e.target.value)}
/>
</InputGroup>
</div>
<div className="col-6">
<InputGroup className="mb-3" id="num2">
<Form.Control
type="number"
placeholder="number2"
value={numberTwo}
onChange={(e) => setNumberTwo(+e.target.value)}
/>
</InputGroup>
</div>
<div className="col-6">
<InputGroup className="mb-3" id="res">
<Form.Control placeholder="answer" value={total} />
</InputGroup>
</div>
<Button variant="dark" onClick={add}>
Add
</Button>
</div>
</>
);
}
export default function App() {
return (
<div className="App">
<About />
</div>
);
}