Why my number1 is always 0?

JavaScript
1
2

Firstly, go into codepen, and in the JS window, there’s an arrow on the top right. Click that, than click on “Format javascript”. Now it’s much more readable.

Now, open the console on codepen. It’s a button on the lower left.

In the JS panel, starting on line 14, replace your inputting1 and inputting2 functions with mine, here:

inputting1(event) {
	this.setState({
		number1: event.target.value
	});
	console.log(`number1 = ${this.state.number1}`);
	console.log(`the value is a ${typeof this.state.number1}`);
}

inputting2(event) {
	this.setState({
		number2: event.target.value
	});
	console.log(`number2 = ${this.state.number2}`);
	console.log(`the value is a ${typeof this.state.number2}`);
}

Now, put some numbers in the boxes, and watch what happens in the console.

There are 2 main problems here:

First of all, when your code is pushing the state for the first time, upon entering a number in the box, it’s setting the state to an empty string.

Secondly, and you may have noticed already, the value of your states are strings, not numbers.

I recommend these two fixes:

Firstly, you don’t need your state to update every single time a number is put in an input box. It’s unnecessary. I would recommend updating both states when you push the submit button.

Secondly, you need to convert the values of your input boxes to numbers. Currently, if you type in numbers that are 2 or more digits long, something does happen, but it’s all broken math.

Good luck.

3

thx for your suggestion I make it shorter and fix it.
lol u could just tell me there’re commands called parseFloat and
parseInt.

4

The goal was to let you learn something on your own instead of spoon feeding answers.

Learning from self research sticks a lot better than some guy going “oh just use this.”