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>

表单输入的值总是字符串，因此要将数字加在一起，您需要将字符串强制转换为数字。两种方法:1)Number(str)或2)+str。
您的产品/价格对象:没有必要将这些价格作为字符串。
您遇到的主要问题是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>

相关内容

最新更新

热门标签：