计算器未在控制台 HTML/JS 上显示结果
您需要访问 HTMLCollection 的第一个元素并将该<img>元素附加到该元素。此外，首先将新创建的元素存储在变量中，以便您可以在附加之前设置属性。要在图像后添加换行符和文本，您可以附加新创建的<br>元素并用于.append添加文本。
const parent = document.getElementsByClassName('chartlyrics')[0];
parent.innerHTML = '';
var img = document.createElement("img");
img.src = "img/103-logo.jpg"
img.setAttribute('class', "")
parent.appendChild(img);
parent.appendChild(document.createElement('br'));
parent.append('Powered by ');
但是，查找具有特定类的每个单个元素以仅获取一个元素是非常浪费的。您应该使用document.querySelectorto 获取与选择器匹配的第一个元素。
const parent = document.querySelector('.chartlyrics');
parent.innerHTML = '';
var img = document.createElement("img");
img.src = "img/103-logo.jpg"
img.setAttribute('class', "")
parent.appendChild(img);
parent.appendChild(document.createElement('br'));
parent.append('Powered by ');
繁星点点滴滴浏览 120回答 2
2回答
-
茅侃侃
const suma = document.getElementById('suma');const resta = document.getElementById('resta');const multiplicacion = document.getElementById('multiplicacion');const division = document.getElementById('division');const output = document.getElementById('output');const num1 = document.getElementById('num1');const num2 = document.getElementById('num2');suma.addEventListener('click', ()=>{ output.innerHTML = `${parseFloat(num1.value) + parseFloat(num2.value)}`;});resta.addEventListener('click', ()=>{ output.innerHTML = `${parseFloat(num1.value) - parseFloat(num2.value)}`;});multiplicacion.addEventListener('click', ()=>{ output.innerHTML = `${parseFloat(num1.value) * parseFloat(num2.value)}`;});division.addEventListener('click', ()=>{ output.innerHTML = `${parseFloat(num1.value) / parseFloat(num2.value)}`;});<!DOCTYPE html><html dir="ltr"> <head> <meta charset="utf-8"> <title> Calculadora </title> </head> <body> <p> <input type = "number" id = "num1" /> <input type = "number" id = "num2" /> </p> <p> <strong> ¿Qué operación desea hacer? </strong> </p> <p> <input type = "button" value = "Sumar" id = "suma" /> <input type = "button" value = "Restar" id = "resta" /> <input type = "button" value = "Multiplicar" id = "multiplicacion" /> <input type = "button" value = "Dividir" id = "division" /> </p> <p id='output' style='color: red;'></p> <script src="script.js"> </script> </body></html>看看document.write() -
泛舟湖上清波郎朗
您的代码中存在一些问题。您没有使用click事件来调用您的函数你没有op在你的函数中定义您在函数中添加了控制台日志，这意味着您在函数中调用该函数。这是行不通的。我已经为你安排好了一切！您可以使用onClick函数将您calculation作为参数传递给您的函数operations，并检查传递的内容switch和case此外，要获取values输入的number输入，您需要使用parseInt()以便将输入strings转换为数字format。此外，您需要确保在值中输入了值，否则将显示点击功能NaN。为避免这种情况，我们可以使用isNan函数来确保有一个valuefor 计算。如果没有值，您可以只显示一条消息说请输入一个值。完整的工作演示：var results = document.getElementById('results');function operations(value) { var numero_1 = parseInt(document.getElementById('num1').value); var numero_2 = parseInt(document.getElementById('num2').value); if (!isNaN(numero_1) && !isNaN(numero_2)) { switch (value) { case 'Sumar': results.innerHTML = 'Results: ' + (numero_1 + numero_2); break; case 'Restar': results.innerHTML = 'Results: ' + (numero_1 - numero_2); break; case 'Multiplicar': results.innerHTML = 'Results: ' + (numero_1 * numero_2); break; case 'Dividir': results.innerHTML = 'Results: ' + (numero_1 / numero_2); break; } var final = document.getElementById('results').textContent; console.log(final) } else { results.innerHTML = 'Please enter value to calculate' }}<!DOCTYPE html><html dir="ltr"><head> <meta charset="utf-8"> <title> Calculadora </title></head><body> <p> <input type="number" id="num1" required /> <input type="number" id="num2" required/> </p> <p> <strong> ¿Qué operación desea hacer? </strong> </p> <p> <input type="button" onclick="operations(this.value)" value="Sumar" id="suma" /> <input type="button" onclick="operations(this.value)" value="Restar" id="resta" /> <input type="button" onclick="operations(this.value)" value="Multiplicar" id="multiplicacion" /> <input type="button" onclick="operations(this.value)" value="Dividir" id="division" /> </p> <div id="results"></div></body></html>
随时随地看视频慕课网APP
相关分类
JavaScript