Html Javascript / 输入输出答案

【问题标题】：Html Javascript / Input-OutputHtml Javascript / 输入输出
【发布时间】：2021-03-16 22:48:15
【问题描述】：

正如您在我的代码中看到的，我试图通过填充宽度和深度来获取材质信息。例如，width:300 和 depth:300 将得到 90000。然后，如果将结果写入其他输入，则可以获取材料信息。

我不想将结果写入另一个输入以获取此信息。我只想将宽度和深度相乘，根据结果，我想看看材质。

演示链接：https://tender-tereshkova-bab7de.netlify.app/

<!DOCTYPE html>

<html>
  <head>
    <title>javascript: calculate two numbers</title>
    <meta charset="windows-1252" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <script>
      function calc() {
        var n1 = parseFloat(document.getElementById('n1').value);
        var n2 = parseFloat(document.getElementById('n2').value);

        document.getElementById('output').value = n1 * n2;
      }
    </script>
  </head>
  <body>
    <p>FILL IN WIDTH AND DEPTH</p>
    <p>
      Widht <input type="text" id="n1" /> <br /><br />
      Depth <input type="text" id="n2" />
    </p>

    <button onclick="calc();">Get Result</button>
    <input type="text" border-style="none" id="output" />

    <br /><br /><br /><br />

    Fill your result <input id="first_name" />
    <button
      onclick="document.getElementById('result').innerHTML = getStudentReport(getStudent())"
      id="output"
    >
      Find Material
    </button>

    <hr />
    <div id="result"></div>

    <script>
      var students = [
        {
          name: '105000',
          track: 'Aluminium ',
          points: 'Dark Blue',
        },
        {
          name: '90000',
          track: 'Stainless',
          points: 'Dark Grey',
        },
      ];

      function print(message) {
        var outputDiv = document.getElementById('output');
        outputDiv.innerHTML = message;
      }

      function getStudent() {
        var student = document.getElementById('first_name').value;
        if (student != null) {
          for (var i = 0; i < students.length; i++) {
            if (students[i].name.toLowerCase() === student.toLowerCase()) {
              return students[i];
            }
          }
        }

        return null;
      }

      function getStudentReport(student) {
        if (student == null) {
          return '';
        }

        var report = '<h2>Material: ' + student.track + '</h2>';

        report += '<p>Color: ' + student.points + '</p>';

        return report;
      }

      function say_hi() {
        var student = document.getElementById('first_name').value;

        if (student.name === students) {
          message = getStudentReport(student);
          print(message);
        }

        document.getElementById('result').innerHTML = html;
      }
    </script>
  </body>
</html>

【问题讨论】：

标签： javascript html input output

【解决方案1】：

如果您想在没有额外步骤的情况下获取材料，您可以计算两个数字的乘积，然后在数组中找到该项目。找到后，您可以更新结果。

我在下面为您创建了一个 sn-p。我做了很多改变：

我已将 HTML 和 JS 部分分开。
我已将输入封装在 form 中，并为输入添加了 labels。
我已将输入类型更改为数字（因为这些字段只能是数字）
我已将 students 数组重命名为 items。
我已将您的name 属性更改为size，它不再是字符串而是数字，因此以后使用起来更容易。 depth 和 width 的乘积是一个数字，因此更容易与另一个数字进行比较。
我们使用addEventListener 检查表单submit event，而不是点击不同的按钮。这样，您可以在任何字段中按 Enter 键，然后提交表单。使用event.target.elements 也更容易获取表单字段。
我删除了不必要的功能
我用过object destructuring:let { depth, width } = e.target.elements。
我使用template literals 用变量在JS 中编写HTML 部分。

您可以点击下面的“运行代码片段”按钮并查看结果:)

// students is renamed to items as I'm sure these were not students
let items = [{
    // size is now a number, so it's easier to work with
    size: 105000,
    material: 'Aluminium',
    color: 'Dark Blue',
    image: 'https://source.unsplash.com/wpOnFM9hjNI/300x300',
  },
  {
    size: 90000,
    material: 'Stainless',
    color: 'Dark Grey',
    image: 'https://source.unsplash.com/LKiB35E8iGA/300x300',
  },
];

// instead of listening to button clicks we listen to form submit
document.querySelector('form').addEventListener('submit', handleSubmit)

function handleSubmit(event) {
  // prevent page reload
  event.preventDefault();
  // get the form elements
  let {
    depth,
    width
  } = event.target.elements;

  // multiply the fields' values
  let product = parseFloat(depth.value) * parseFloat(width.value);
  // get the item by size
  let item = getItem(product);
  // if there is an item found
  let result = item
    ? `<h2>Material: ${item.material}</h2>
 <p>Color: ${item.color}</p>
 <img src="${item.image}" alt="">`
    : `<h2>Oh, noes!</h2>
 <p>No item found</p>`;

  // render the result
  document.getElementById('result').innerHTML = result;
}

function getItem(size) {
  for (let i = 0; i < items.length; i++) {
    if (items[i].size === size) {
      return items[i];
    }
  }
  // if we didn't find anything
  return null;
}

<form>
  <p>FILL IN WIDTH AND DEPTH</p>
  <label>Width <input type="number" name="width" required /></label>
  <label>Depth <input type="number" name="depth" required /></label>
  <button type="submit">Find material</button>
</form>
<hr>
<div id="result"></div>

【讨论】：

嘿伙计！感谢您的回复。这对我帮助很大。如果我也想将 img 添加到结果项目中，我必须添加什么？再次感谢...
我很高兴它有帮助。如果要添加图片，可以添加图片的链接并在result 中创建img 标签。我已经更新了上面的 sn-p。
酷！如果您不介意，我只想再添加一件事。 - 如果结果大小在 90000 到 100000 之间，我想查看铝材料信息。 - 如果结果大小在 100001 和 120000 之间，我想查看不锈钢材料信息。
我很确定你可以自己做。代替size 添加min 和max 属性，并在getItem 的for 循环中检查值是否介于这两个变量之间。 (if (size >= items[i].min && size <= items[i].max) {...)
好的，谢谢你。我会根据你的方向尝试。请不要误解我的意思。我不是想让你做所有的事情。我只是对这些东西很陌生，并试图通过了解它的工作原理来提高自己。