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

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

在此处详细了解数据属性：Using data attributes | MDN

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

查看下面的工作代码段：

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）：

Answer 2

您还可以使用setAttribute()功能

function showElements(){

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

}