How can I use JavaScript for my HTML Project?

Question

I will explain my problem as best as I can. So first of all, I wrote a calculator in HTML, CSS and JavaScript, but I did the JavaScript part in the HTML file.

The JavaScript file is used intern, in HTML. So now I want to use it in an external JavaScript file, so I created one. I cant get it to work, that myFunction1() works in the external JavaScript file, so what am I doing wrong?

Let's have a look in my code:

document.getElementById("num1").addEventListener("click", myFunction1);
//I call the id num1 and tell him, if it gets clicked move on to myFunction1

function myFunction1() {
  document.getElementById("num1").onClick = "document.calc.txt.value +='1'";
  //Now I want that if it gets clicked, the calculator should put the number 1 on the screen, so I can remove the intern JavaScript in HTML out and just use the extern JavaScript file.
}

/*@import url('https://fonts.googleapis.com/css?family=Poppins: 300,400,500,600,700,800,900&display=swap'); */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #091921;
}

.calculator {
  position: relative;
  display: grid;
}

.calculator .value {
  grid-column: span 4;
  height: 100px;
  text-align: right;
  border: none;
  outline: none;
  padding: 10px;
  font-size: 18px;
}

.calculator span {
  display: grid;
  width: 60px;
  height: 60px;
  color: #fff;
  background: #0c2835;
  place-items: center;
  border: 1px solid rgba(0, 0, 0, .1)
}

.calculator span:active {
  background: #74ff3b;
  color: #111;
}

.calculator span.clear {
  grid-column: span 2;
  width: 120px;
  background: #ff3077;
}

.calculator span.plus {
  grid-row: span 2;
  height: 120px;
}

.calculator span.equal {
  background: #03b1ff;
}

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="Taschenrechner.css">
  <title>Calculator</title>
</head>

<body>

  <form class="calculator" name="calc">
    <input class="value" type="text" name="txt" readonly="">
    <span class="num clear" onClick="document.calc.txt.value =''">c</span>
    <span class="num" onClick="document.calc.txt.value +='/'">/</span>
    <span class="num" onClick="document.calc.txt.value +='*'">*</span>
    <span class="num" onClick="document.calc.txt.value +='7'">7</span>
    <span class="num" onClick="document.calc.txt.value +='8'">8</span>
    <span class="num" onClick="document.calc.txt.value +='9'">9</span>
    <span class="num" onClick="document.calc.txt.value +='-'">-</span>
    <span class="num" onClick="document.calc.txt.value +='4'">4</span>
    <span class="num" onClick="document.calc.txt.value +='5'">5</span>
    <span class="num" onClick="document.calc.txt.value +='6'">6</span>
    <span class="num plus" onClick="document.calc.txt.value +='+'">+</span>
    <span class="num" onClick="document.calc.txt.value +='3'">3</span>
    <span class="num" onClick="document.calc.txt.value +='2'">2</span>
    <span id="num1" class="num" onClick="document.calc.txt.value +='1'">1</span>
    <!-- I used this id for JavaScript, just focus on that -->
    <span class="num" onClick="document.calc.txt.value +='0'">0</span>
    <span class="num" onClick="document.calc.txt.value +='00'">00</span>
    <span class="num" onClick="document.calc.txt.value +='.'">.</span>
    <span class="num equal" onClick="document.calc.txt.value =eval(calc.txt.value)">=</span>
  </form>

  <button id="demo">>Test</button>
  <script type="text/javascript" src="Taschenrechner.js"></script>
</body>


</html>

To sum up: In my HTML file are intern JavaScript codes, I used onClick="document.calc.txt.value +='/'" and that is the only thing I want to export to the extern JavaScript file. I can't get it to work, so that is my only question:

How can I transport the onClick="document.calc.txt.value +='/'" code to my extern JavaScript file, so that it works?

Thanks for your replies.

Quentin · Accepted Answer · 2020-07-19 16:24:52Z

4

When num1 is clicked on, the function myFunction1 gets called.

Make that function do what you actually want it to do!

function myFunction1() {
    document.calc.txt.value +='1';
}

Recursively creating event handlers makes no sense. You're already using addEventListener to add the event listener.
The property is called onclick not onClick
The onclick property accepts a function, not a string
addEventListener is preferred to onclick = since it is more flexible and doesn't blow away existing event handlers.

answered Jul 19, 2020 at 16:24

community wiki

Quentin

Sign up to request clarification or add additional context in comments.

Comments

Andifined · Accepted Answer · 2020-07-19 16:29:23Z

1

EDIT: Look at Quentins answer, its much more extensive than mine.

You don't need to set onclick in your function. You already registered your EventListener via addEventListener, the second parameter is the function that is called after a 'click' event.

So you can simply change your myFunction1 to:

function myFunction1(event /* This is the click event that was triggered, but you don't need it in this function*/) {
  document.calc.txt.value += 1;
}

answered Jul 19, 2020 at 16:29

Andifined

4896 silver badges19 bronze badges

Comments

yaxeldragon · Accepted Answer · 2020-07-19 16:36:23Z

1

you can try to send the value of the span.

<span class="num equal" onClick="send(this.innerText)">=</span>

function send(value){
    alert(value);
    // Here you can do anything that you want
       // if(!isNaN)      - Checks if it's a number.
       // parseInt(value) - Returns a number.  "1" => 1
}

Hope it helps you Out!

answered Jul 19, 2020 at 16:36

yaxeldragon

438 bronze badges

Collectives™ on Stack Overflow

How can I use JavaScript for my HTML Project?

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