时间戳

首页 > 解决方案 > 找不到 JavaScript [object HTMLSpanElement]，我该如何解决

javascript - 找不到 JavaScript [object HTMLSpanElement]，我该如何解决

问题描述

"use strict";
let btn = document.getElementById("buttonCarrito");
btn.addEventListener("click",agregar);

//this function is agregar (add in English), the idea is that this function put the elements Manzana (Apple) in the shop cart but when i try do this i get [object HTMLSpanElement]50 (50 is the Apple value, but i don't can show only the number 50)
function agregar(){

    let Productos= {
            "Manzana": "50",
            "Banana": "40",
            "Naranja": "30",
            "Mandarina": "20"        
    }

    console.table(Productos)

    let frutaComprada= document.getElementById("inputProducto").value;

    let costoTotal= document.getElementById("valor");
        
    let productoSeleccionado=Productos[frutaComprada];

    costoTotal=costoTotal+productoSeleccionado;

    valor.innerHTML=costoTotal;

}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
        <div class="container">
        <h1>Bienvenido a la tienda</h1>
        <input id="inputProducto" type="text" placeholder="Ingrese su producto">
        <br>
        <br>
        <input id="inputCompra" type="text" placeholder="Ingrese el valor de su compra">
        <br>
        <br>
        <button id="buttonCarrito">Agregar al carrito</button>
        <p>El valor total de su compra es: <span id="valor"> 0 </span></p>
        </div>
</body>

<script src="js.js"></script>
</html>

标签： javascripthtml

解决方案

  1. 来自表单输入的值将始终是字符串，因此要将数字相加，您需要将字符串强制转换为数字。几种方法： 1)Number(str)或 2) +str。

  2. 您的产品/价格对象：无需将这些价格作为字符串。

  3. 您遇到的主要问题let costoTotal= document.getElementById("valor");是只拾取元素而不是文本内容。我们可以使用let costoTotal= document.getElementById("valor").textContent;它，但是我们需要将它强制转换为类似于输入值的数字。

（旁注：目前您的代码没有使用inputCompra我在评论中询问它的原因。因此，例如，无论在该输入中输入什么，香蕉的总数都会增加 40。）

let btn = document.getElementById("buttonCarrito");
btn.addEventListener("click", agregar);

function agregar() {

  let Productos = {
    Manzana: 50,
    Banana: 40,
    Naranja: 30,
    Mandarina: 20
  }

  let frutaComprada = document.getElementById("inputProducto").value;
  let costoTotal = Number(document.getElementById("valor").textContent);
  let productoSeleccionado = Productos[frutaComprada];

  costoTotal = costoTotal + productoSeleccionado;

  valor.textContent = costoTotal;

}
<div class="container">
  <h1>Bienvenido a la tienda</h1>
  <input id="inputProducto" type="text" placeholder="Ingrese su producto">
  <br>
  <br>
  <input id="inputCompra" type="text" placeholder="Ingrese el número de artículos">
  <br>
  <br>
  <button id="buttonCarrito">Agregar al carrito</button>
  <p>El valor total de su compra es: <span id="valor"> 0 </span></p>
</div>

这是一个使用数量的版本，以防您好奇。

let Productos = {
  Manzana: 50,
  Banana: 40,
  Naranja: 30,
  Mandarina: 20
}

const product = document.getElementById('inputProducto');
const quantity = document.getElementById('inputCompra')
const valor = document.getElementById('valor');
const btn = document.getElementById('buttonCarrito');

btn.addEventListener('click', agregar);

function agregar() {

  const frutaComprada = product.value;
  const itemQuantity = Number(quantity.value);
  const productoSeleccionado = Productos[frutaComprada];
  const subTotal = productoSeleccionado * itemQuantity;
  let costoTotal = Number(valor.textContent);

  costoTotal = costoTotal + subTotal;

  valor.textContent = costoTotal;

}
<div class="container">
  <h1>Bienvenido a la tienda</h1>
  <input id="inputProducto" type="text" placeholder="Ingrese su producto">
  <br>
  <br>
  <input id="inputCompra" type="text" placeholder="Ingrese el valor de su compra">
  <br>
  <br>
  <button id="buttonCarrito">Agregar al carrito</button>
  <p>El valor total de su compra es: <span id="valor"> 0 </span></p>
</div>

推荐阅读