您需要访问 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 ');
2 回答
茅侃侃
TA贡献1842条经验 获得超21个赞
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>
泛舟湖上清波郎朗
TA贡献1818条经验 获得超3个赞
您的代码中存在一些问题。
您没有使用
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>
添加回答
举报
0/150
提交
取消