为了账号安全,请及时绑定邮箱和手机立即绑定

计算器未在控制台 HTML/JS 上显示结果

计算器未在控制台 HTML/JS 上显示结果

繁星点点滴滴 2023-01-06 16:25:58

您需要访问 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贡献1587条经验 获得超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>

看看document.write()


查看完整回答
反对 回复 2023-01-06
?
泛舟湖上清波郎朗

TA贡献1563条经验 获得超3个赞

您的代码中存在一些问题。

  1. 您没有使用click事件来调用您的函数

  2. 你没有op在你的函数中定义

  3. 您在函数中添加了控制台日志,这意味着您在函数中调用该函数。这是行不通的。

我已经为你安排好了一切!您可以使用onClick函数将您calculation作为参数传递给您的函数operations,并检查传递的内容switchcase

此外,要获取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>


查看完整回答
反对 回复 2023-01-06
  • 2 回答
  • 0 关注
  • 14 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信