如何在 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);