时间戳

首页 > 解决方案 > 如何在我的 HTML 项目中使用 JavaScript？

javascript - 如何在我的 HTML 项目中使用 JavaScript？

问题描述

我会尽我所能解释我的问题。所以首先，我用 HTML、CSS 和 JavaScript 编写了一个计算器，但我在 HTML 文件中做了 JavaScript 部分。

JavaScript 文件在 HTML 中使用实习生。所以现在我想在外部 JavaScript 文件中使用它，所以我创建了一个。我无法让它工作，它myFunction1()在外部 JavaScript 文件中工作，所以我做错了什么？

让我们看看我的代码：

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>

总结一下： 在我的 HTML 文件中是我使用的内部 JavaScript 代码，onClick="document.calc.txt.value +='/'"这是我想要导出到外部 JavaScript 文件的唯一内容。我无法让它工作，所以这是我唯一的问题：

如何将onClick="document.calc.txt.value +='/'"代码传输到我的外部 JavaScript 文件，以便它工作？

感谢您的回复。

标签： javascripthtmlcss

解决方案

num1单击时，将调用该函数myFunction1。

让那个函数做你真正想做的事情！

function myFunction1() {
    document.calc.txt.value +='1';
}
  • 递归创建事件处理程序没有意义。您已经在使用addEventListener添加事件侦听器。
  • 该属性称为onclick不onClick
  • 该onclick属性接受一个函数，而不是一个字符串
  • addEventListener首选，onclick =因为它更灵活并且不会破坏现有的事件处理程序。

推荐阅读