javascript - 如何将 JavaScript 用于我的 HTML 元素？-6ren

javascript - 如何将 JavaScript 用于我的 HTML 元素？

转载作者：行者123 更新时间：2023-12-01 23:54:40

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

在 HTML 中使用了 JavaScript 文件。所以现在我想在外部 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 文件，以便它工作？

感谢您的回复。

最佳答案

当 num1 被点击时，函数 myFunction1 被调用。

让那个函数做你真正想让它做的事!

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

递归创建事件处理程序毫无意义。您已经在使用 addEventListener 添加事件监听器。
该属性称为 onclick 而不是 onClick
onclick 属性接受一个函数，而不是一个字符串
addEventListener 优于 onclick =，因为它更灵活并且不会破坏现有的事件处理程序。

关于javascript - 如何将 JavaScript 用于我的 HTML 元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62982781/

文章推荐： r - 将字符串部分提取到 R 中的列

文章推荐： java - javax 自定义 validator 的 Junit 测试用例

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何将 JavaScript 用于我的 HTML 元素？