Estoy haciendo una lista de carrito de compras, donde puede agregar comestibles al sitio web y agrega todos los precios juntos. Pero el problema es que no sé cómo agregar un elemento al hacer clic. Aquí está el enlace al sitio: https://aaryank.codewizardshq.com/GroceryCart/index. html

Aquí está mi 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>

No tengo javascript, solo "function addItem () {}".

-3
Aaryan Khadka 30 abr. 2020 a las 02:41

2 respuestas

La mejor respuesta

Supongo que lo que está buscando es cómo crear un nuevo elemento DOM, un DIV en este caso, y cómo agregarlo en algún lugar del DOM, mediante programación.

En términos generales, primero creas un elemento

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

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

Entonces, necesita agregar este nuevo elemento como hijo de algún otro elemento, su "contenedor", por así decirlo. Añádalo a esa división intermedia que llamó "página".

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

// Add your new div to the container
container.appendChild(element);
0
resle 29 abr. 2020 a las 23:55

Hay dos formas comunes de agregar un controlador de clic de JavaScript en el desarrollo web.

La primera forma es adjuntarlo en el HTML, a través de un atributo onclick:

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

La segunda forma es adjuntarlo desde JavaScript. En el script, necesitará tener un identificador en el elemento DIV; puede usar funciones como document.getElementById o document.querySelector para hacer esto. El primero toma como parámetro una cadena que es una identificación de elemento; este último toma un selector de estilo CSS.

Cualquiera de estos obtendrá un control del DIV anterior:

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

Una vez que tenga el identificador, puede usar su método addEventListener para activar su función cuando se emite el evento.

function myFunction() {
  console.log('hello, world');
}
myDiv.addEventListener("click", myFunction);
0
Wes 29 abr. 2020 a las 23:59