javascript - Html Javascript / 输入输出

问题描述

正如您在我的代码中看到的那样，我试图通过填充宽度和深度来获取材料信息。例如，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>

标签： javascripthtmlinputoutput

解决方案

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

我在下面为您创建了一个片段。我做了很多改变：

我已经分离了 HTML 和 JS 部分。
我已经将输入包装在 a 中form，并为输入添加了标签。
我已将输入类型更改为数字（因为这些字段只能是数字）
我已将students数组重命名为items.
我已将name属性更改为sizein your ，它不再是字符串而是数字，因此以后使用起来更容易。depth和的乘积width是一个数字，因此更容易与另一个数字进行比较。
我们通过使用来检查表单submit事件 addEventListener，而不是不同的按钮点击。这样，您可以在任何字段中按 Enter 键，然后提交表单。使用 . 获取表单字段也更容易event.target.elements。
我删除了不必要的功能
我用过对象解构：let { depth, width } = e.target.elements。
我使用模板文字在带有变量的 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>

javascript - Html Javascript / 输入输出

问题描述

解决方案

推荐阅读