时间戳

首页 > 解决方案 > 处理多个使用 Javascript 的 HTML 元素 我在 Blogger 的 HTML 界面中混合使用了 JavaScript 和 HTML，以创建一个循环显示图片的下拉功能。忍受我；虽然我一般都知道如何编码，但我对 JavaScript 或 HTML 一无所知。这是我的简化代码： <script language="javascript"> function setImage(select) { var image = document.getElementsByName

问题描述

标签： javascripthtmlblogger

解决方案

在您的第一个功能中，您有：

var image = document.getElementsByName("image-swap")[0];

这指的是具有相应属性的第一个name元素，它是<img>：

<img data-original-height="1314" data-original-width="1530" height="344" name="image-swap" src="" width="400" />

在setImage2你有：

var image = document.getElementsByName("young_adult")[0];

这指的是具有相应属性的第一个元素，即 a ：name<select>

<select id="income_race" name="young_adult" onchange="setImage2(this);">

您似乎不需要选择的名称属性，因此请将其删除。这样，跟随它的图像（也具有相同的名称属性），现在是具有该名称属性的第二个元素，将成为第一个。

<script language="javascript">
  function setImage(select) {
    var image = document.getElementsByName("image-swap")[0];
    image.src = select.options[select.selectedIndex].value;
  }
</script><br />

<select id="all_population" name="all_population" onchange="setImage(this);">
  <option value="">Select One</option>
  <option value="https://1.bp.blogspot.com/-aq1gUvq3RH4/X0buRMjyb4I/AAAAAAAAA1c/xaLW53hBW50oR5nncbAxMpAzhVbZGQO8wCLcBGAsYHQ/s1530/06_bar_chart_incomexAmerican%2BIndian.png;">American Indian</option>
  <option value="https://1.bp.blogspot.com/-EDsska671rY/X0budvqlQ-I/AAAAAAAAA1w/F-c6rmlpudk0SaOgMvi27biWIabYIW_5ACLcBGAsYHQ/s1530/06_bar_chart_incomexAsian.png;">Asian</option>
</select><br />

<div class="separator" style="clear: both; text-align: center;">
  <img data-original-height="1314" data-original-width="1530" height="344" name="image-swap" src="" width="400" />
</div>
<div class="separator" style="clear: both; text-align: center;"><br /></div>
<div class="separator" style="clear: both; text-align: left;"><br /></div>

<script language="javascript">
  function setImage2(select) {
    var image = document.getElementsByName("young_adult")[0];
    image.src = select.options[select.selectedIndex].value;
  }
</script><br />

<select id="income_race" onchange="setImage2(this);">
  <option value="">Select One</option>
  <option value="https://1.bp.blogspot.com/-tfwwZefpeiU/X0fSa5PcqwI/AAAAAAAAA2o/fE63pI0YCm4ooIu8PPN49_ilI6PbaV-IQCLcBGAsYHQ/s1530/06.2_bar_chart_incomexAmerican%2BIndian_young.png;">American Indian</option>
  <option value="https://1.bp.blogspot.com/-FE6xtPVG_V8/X0fSldTMyeI/AAAAAAAAA2s/3UlvT5CvmyEDiUThPfs8wfJOdTdQmfvzgCLcBGAsYHQ/s1530/06.2_bar_chart_incomexAsian_young.png;">Asian</option>
</select><br />

<div class="separator" style="clear: both; text-align: center;">
  <img data-original-height="1314" data-original-width="1530" height="344" name="young_adult" src="" width="400" />
</div>
<div class="separator" style="clear: both; text-align: center;"><br /></div>
<div class="separator" style="clear: both; text-align: left;"><br /></div>

参考：https ://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByName

推荐阅读