Javascript：通过输入文本框更改元素值

Question

我想使用文本框和提交按钮更改 THISVALUE，然后刷新页面上的数据：

<form id="newssearch" action="#">
  <input type="text" size="30" maxlength="155" name="search" id="search" />
  <input type="button" name="submit" value="Search" onclick="showElements();" />
</form>

<div class="sm" data-type="static" data-symbol="THISVALUE" data-size="medium" data-logscale="on" data-chart-type="ca" data-timeframe="1y"></div>

<div class="sm" data-type="news" data-symbol="THISVALUE"></div>

另外：您按下按钮，它会使用新的数据符号值刷新页面。该值会在下次访问该页面或执行另一次搜索之前保持不变。

也许在 php 中这样做会更好？

Answer 1

你也可以使用setAttribute()函数

function showElements(){

  document.getElementsByClassName('blah')[0].setAttribute("data-symbol",document.getElementById('search').value);

}

Answer 2

首先 - data-symbol 不是一个元素。它是一个属性，更具体地说是一个 data 属性。

在此处了解有关数据属性的更多信息：Using data attributes | MDN

---

我假设您希望表单中提交的数据进入data-symbol 属性。

查看下面的工作代码 sn-p：

function showElements(){

  // just copy over the search text into the data attribute
  document.getElementsByClassName('blah')[0].dataset.symbol = document.getElementById('search').value;

}

<div class="blah" data-type="cur" data-symbol="THISVALUE"></div>


<form id="newssearch" action="#">

  <input type="text" size="30" maxlength="155" name="search" id="search" />
  <input type="button" name="submit" value="Search" onclick="showElements();" /> <!-- no need to pass any arguments to this function, we can get data using element ID -->

</form>

---

使用开发者工具检查结果（我在这里使用过 Chrome）：