CODEWITHSUNDEEP
javascripthtmlcss
XTTX
XTTX

Reputation: 43

How can I use JavaScript for my HTML Project?

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.

Upvotes: 2

Views: 293

Answers (3)

yaxeldragon
yaxeldragon

Reputation: 43

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!

Upvotes: 1

Andifined
Andifined

Reputation: 489

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;
}

Upvotes: 1

Quentin
Quentin

Reputation: 944442

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.

Upvotes: 4

Related Questions