Question

我不确定要在Google上搜索什么，但这是我正在尝试做的事情。

当前，这是我的HTML代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Product Code weight convertor</title>
    <link type="text/css" rel="stylesheet" href="styling.css">
  </head>
  <body>
    <input type="text" placeholder="Product Code" class="pcode">
    <button class="btn=find"><i class="x"></i>Find</button>
    <div class="res" id="res1">Result1</div>
    <script src="app.js"></script>
  </body>
</html>

在result1上这样表示id的地方就是更改为单击按钮后在提供的文本字段中输入的内容。

让我们说... 我已经123进入了文本字段。单击Find，result1现在更改为123。

我不确定从哪里开始，已经研究过Google了，但是找不到有用的东西。

Answer 1

您需要向click元素添加button事件侦听器。单击按钮后，从输入字段中获取值，并将其显示在结果div元素中

const btn = document.querySelector('.btn-find');
const inputField = document.querySelector('.pcode');
const result = document.querySelector('.res');

btn.addEventListener('click', () => {
  if (inputField.value !== '') {
     result.textContent = inputField.value;
  }
});

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Product Code weight convertor</title>
    <link type="text/css" rel="stylesheet" href="styling.css">
  </head>
  <body>
    <input type="text" placeholder="Product Code" class="pcode">
    <button class="btn-find"><i class="x"></i>Find</button>
    <div class="res" id="res1">Result1</div>
    <script src="app.js"></script>
  </body>
</html>

Answer 2

您需要在输入中添加一个类：

<input id="myText" type="text" placeholder="Product Code" class="pcode">

和一些JavaScript：

<script type="text/javascript">
function myFunction() {
  document.getElementById("res1").innerHTML = document.getElementById("myText").value;
}
</script>

Answer 3

在使用jquery的情况下，您可以这样做。

<input type="text" class="search__input">
<button>click</button>

$("button").click(event => {
  let result = $(".search__input").val();
  console.log(result);
});

Answer 4

您可以执行此操作，说“查找”按钮的ID为id =“ find”

$("#find").click(function(){ 
var inputdata = $(".pcode").val();
document.getElementById("res1").innerHTML = inputdata;
});

您可以尝试此代码。它将起作用。

如何将输入的文本传输到输出字段

4 个答案: