如何在 javascript 中添加 div onclick？

Question

我正在制作一个购物车清单，您可以在其中将杂货添加到网站上，并将所有价格加在一起。 但问题是，我不知道如何添加项目 onclick。 这是该网站的链接： https://aaryank.codewizardshq.com/GroceryCart/index.html

这是我的 html：

<link href="https://fonts.googleapis.com/css?family=Bungee|Bungee+Shade|Covered+By+Your+Grace" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:800" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
<div class="page" id="page">
  <title> Your Grocery Cart </title>
  <header>
    <h1> Your Grocery Cart </h1>
  </header>
  <span> <u> Your Items </u> </span>
  <br><br>
  <div class="item" id="item">
  <u><span id="itemSpan"> Item #<span id="itemNumber"></span></span></u>
  <br>
  </div>
  <input type="text" id="itemName"><span>, $<input id="priceInput"></span>
  <br><br>
  <button onclick="addItem()"> + Add an Item + </button>
  <br><br><br><br>
  <span> <u> Total Amount ($) </u> </span>
  <br><br>
  <input type="text" id="outputBox" name="outputBoxName" disabled="disabled">
  <br>
</div>
<script type = "text/javascript" src = "js.js"></script>

我没有任何 javascript，只有“函数 addItem(){}”。

Answer 1

我想您正在寻找的是如何创建一个新的 DOM 元素，在这种情况下是一个 DIV，以及如何以编程方式将它添加到 DOM 中的某个位置。

一般来说，你首先创建一个元素

// Create a new div
var new element = document.createElement("div");

// Set its content to something meaningful
element.innerHTML = "Hi I am new"

然后，您需要将 append 这个新元素作为其他元素的子元素，可以说是它的“容器”。 让我们将它添加到您命名为“page”的中间 div 中。

// Get a container for your new div
var container = document.getElementById("page");

// Add your new div to the container
container.appendChild(element);

Answer 2

在 web 开发中添加 javascript 点击处理程序有两种常用方法。

第一种方法是通过 onclick 属性将其附加到 HTML 中：

<div id="myDiv" onclick="alert('hello, world');">Contents of Div</div>

第二种方法是从 JavaScript 连接它。 在脚本中，您需要有一个 DIV 元素的句柄； 您可以使用 document.getElementById 或 document.querySelector 之类的函数来执行此操作。 前者将一个字符串作为其参数，该字符串是一个元素 id； 后者采用 CSS 样式的选择器。

这些中的任何一个都可以处理上面的 DIV：

var myDiv = document.getElementById("myDiv");
var myDiv = document.querySelector("#myDiv");

一旦你有了句柄，你可以使用它的 addEventListener 方法在事件发出时触发你的 function。

function myFunction() {
  console.log('hello, world');
}
myDiv.addEventListener("click", myFunction);