I need some help with making a cauculator

HTML-CSS
1

so prettty much i am making a js / html cauculator, and my current code is
(!DOCTYPE html)
(html)
(body)

(input type=“text”><input type=“text”)

(button type=“button”
onclick=“document.getElementById(‘demo1’).innerHTML = Date()”)
run(/button)
(p id=“demo”)(/p)

(script)
let x = ⇉number⇇;
let y = ⇉number2⇇;
let z = x + y;
document.getElementById(“demo”).innerHTML = z;
(/script)

(/body)
(/html)

and the ⇉number⇇? thats what i need help with. i need to make the
have a id that sends to the ⇉number⇇.

can you help me with that?

2

You would need to use const var = document.getElementById(“number”) do you have the ID`s in html? So it looks like missing a few things.

3

ill get it working!..

1 Like
4

how do i make a constaint signal?

5

Please write your code using proper formatting.

When you enter a code block into a forum 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.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

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

I don’t know what that means?

I would strongly suggest you go through the freeCodeCamp curriculum. Start at the top and work your way down, or start at the JS section if you just want to jump into learning JS.

6

image_2024-08-22_192256755
image_2024-08-22_1922567551294×236 5.66 KB

??? no code sumbolll

7

constaint signal means always checking for/updating document/element

8

And I’m also fixing up my grammer.

10

If the button is missing, you can still manually add the backticks.

```
your code
```

I still do not know what you mean by this. Please provide some context for what you are trying to achieve.

1 Like
12

Should my code look like this?

<!DOCTYPE html>
<html>
<body>

<input id="1" type="text">
<input id="2" type="text">
<br>
<p id="demo"></p>

<script>
let x = const var document.getElementById(1).innerHTML ;
let y = const var document.getElementById(2).innerHTML ;
let z = x + y;

const document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>

If not, please provide more information.
‌

What am I missing? Please provide more information.
(Keep in mind I’m only making a (+) calculator)

13 
let x = const var

That is not the correct syntax for variable declaration. Remove the const var

Also, the input element does not use innerHTML for its value, it uses the .value property.

let x = document.getElementById('someInputElementId').value;

However, you can not get the .value from the input element without using an event listener because its value is initially an empty string. The code that gets the value from the input has to run after the user has typed into the input. That means you need to add an event listener to the input element, or you need to create a button and inside the buttons click event listener you can get the input element value.

const inputElement = document.querySelector("input");

inputElement.addEventListener("input", (e) => {
  const inputText = e.target.value;
  console.log(inputText)
});

Or

const inputElement = document.querySelector("input");
const button = document.querySelector("button");

button.addEventListener("click", (e) => {
  const inputText = inputElement.value;
  console.log(inputText)
});

let z = x + y;

The data type of the input element value is always of type string (i.e. x and y are strings). If you want to do addition you have to convert the string values into numbers (e.g. using Number() or parseInt()) otherwise you will be doing string concatenation, not addition using numbers.

Again, all this is taught in the curriculum.

2 Likes
14

So I’ve updated my code to this;

<!DOCTYPE html>
<html>
<body>

<input id="1" type="text">
<input id="2" type="text">
<br>
<p id="demo"></p>

<script>
const inputElement = document.querySelector("1");

inputElement.addEventListener("1", (e) => {
  const inputText = e.target.value;
  console.log(inputText)
});

const inputElement = document.querySelector("2");

inputElement.addEventListener("2", (e) => {
  const inputText = e.target.value;
  console.log(inputText)
}); 

let z = x + y;

const inputElement = document.querySelector("demo");

inputElement.addEventListener("demo", (e) => {
  const inputText = e.target.value;
  console.log(inputText)
}) = z;
</script>
</body>
</html>

How do I get it to work?

Also I’m in the middle of learning javascript so sorry if my code is bad.

15

Hi @HTML_Greg

You are declaring three variables using the const keyword, which each variable using the same name.

const, short for constant, is used to declare a variable just once. Declaring another const variable with the same name is a syntax error.

You also have a lot of buggy code.

You many want to consider learning some JavaScript basics first.

If you want to proceed however, I have a suggestion.
Add the following code to the top of the script.

alert(123);

A popup window will appear with the text 123

Then, move that code below the next block of code.

If the message does not appear, then the code above is not correctly syntaxed. Write simpler code until you debug the issues. That way, you can move onto the next section, with correctly formatted but maybe not functional code.

Happy coding.

2 Likes
16

I couldn’t get it to work but I did re-do my code:

<!DOCTYPE html>
<html>
<body>

<h2 style="font-family:verdana">Calculator</h2>
<input id="1" type="text">
<input id="2" type="text">
<br>
<br>
<button type="button" 
onclick="document.getElementById('demo').innerHTML = 'This number is to be changed into a number'">Run</button>

<style>
x = ;
y = ;
z = x + y;
document.getElementById("3").innerHTML =
z;
</style>

<p style="font-family:verdana" id="demo">0</p>

</body>
</html>

I need the
onclick="document.getElementById('demo').innerHTML = 'This number is to be changed into a number'">Run</button>
to have the id 3 so the variable
This number is to be changed into a number
works and can be changed into z = x + y (number).

Also I need the <input id="id" type="text"> to change the variable in the run button so when you click it, it spits out the answer.
Can you help me with that?

17

I meant script not style :sweat_smile:

18

Hi @HTML_Greg

This is a lot closer.

Using the code from @lasjorg:

Using only the document.getElementById().value part of the code, add the number for the id between the round braces. Since they are numbers you do not need to use quote marks.

19

Like this?

<!DOCTYPE html>
<html>
<head>
<meta charset="ascii">
<title>Calculator</title>
</head>
</head>

<body>
<h2 style="font-family:verdana">Calculator</h2>
<input id="1" type="text">
<input id="2" type="text">
<br>
<br>
<button type="button" 
onclick="document.getElementById('demo').innerHTML = 'This number is to be changed into a number'">Run</button>

<script>
let x = document.getElementById('1').valuelet x = document.getElementById('someInputElementId').value;;
let y = document.getElementById('2').value;;
z = x + y;
document.getElementById("3").innerHTML =
z;
alert(123);
</script>

<p style="font-family:verdana" id="demo">0</p>
</body>
</html>
20

You don’t need to use script tags or an event listener function.

You can add all the code into the onclick event.

As @lasborg mentioned, the input values for the numbers are strings.

So wrap each document.getElementById() in Number()

1 Like
21

ohhhhhhhhh thank you

22

Grab just the document.getElementById('1').value and document.getElementById('2').value, remove the quote marks, wrap each expression in Number() and place a plus sign between them.