Question

我想使用JS从搜索栏中获取值，然后将其放在HTML中。

function pullValue() {
var search = document.getElementById("search-bar")
}

我的问题是你如何使用这些数据填写：

  <h3 class="ingredient">
     *value from the function above"
  </h3>

Answer 1

通常，你会使用一些主函数用来运行作业的小函数，例如

// Set the text content of an element
// Some browsers support only textContent, some only innerText, some both
// so cater for them all
function setText(el, s) {
  if (typeof el.textContent == 'string') {
    el.textContent = s;
  } else if (typeof el.innerText == 'string') {
    el.innerText = s;
  }
}

// Given an element ID, set the text to text
function update(id, text) {
  var el = document.getElementById(id);
  if (el) {
    setText(el, text);
  }
}

，关联的HTML可能是：

<input type="text" id="searchBar" onkeyup="update('ingredient', this.value);">
<div id="ingredient"></div>

Answer 2

你可以很容易地做到这一点。将变量设置为输入的value，然后使用变量设置另一个innerHTML / value的{{1}}或input。您还需要一个事件监听器，可以更改输入或单击按钮。

以下是演示：http://codepen.io/lachlanjc/pen/ZYBrqg?editors=101

使用Javascript拉入输入并插入HTML

2 个答案: