Обработка нескольких элементов в HTML с помощью Javascript

ProgramBox

Обработка нескольких элементов в HTML с помощью Javascript

Post author:admin
Запись опубликована:10 апреля, 2023
Post category:Вопросы по программированию

#javascript #html #blogger

#javascript #HTML #blogger

Вопрос:

Я использую смесь JavaScript и HTML в HTML-интерфейсе Blogger для создания функции выпадающего списка, которая циклически перебирает изображения. Потерпите меня; хотя я знаю, как кодировать в целом, я не разбираюсь в JavaScript или HTML. Это мой сокращенный код:

 <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+Indian.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" name="young_adult" 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+Indian_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>

Насколько я понимаю, я должен создать вторую, другую функцию SetImage2() для второго <select> . В противном случае, если мои вторые <select> ссылки SetImage() , <select> установят изображение под первым <select> (что и происходило изначально). Однако, когда я делаю это, ничего не происходит, когда я перебираю свой второй <select> . Насколько я понимаю, я использую ту же логику, что и первый <select> , поэтому я не уверен, почему этот второй <select> не создает изображение под ним.

Я был бы рад, если бы кто-нибудь мог дать некоторое представление. Приветствия!

Ответ №1:

В вашей первой функции у вас есть:

 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];

Это относится к первому элементу с соответствующим name атрибутом, который является <select> :

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

Похоже, вам не нужен атрибут name при выборе, поэтому удалите его. Таким образом, изображение, которое следует за ним (которое также имеет тот же атрибут name), который теперь является вторым элементом с этим атрибутом name, станет первым.

Показать фрагмент кода

 <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+Indian.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+Indian_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

1. Ему нужно будет использовать [2] на своем JavaScript. Возможно, у него есть сценарий использования name для целей отправки формы, поэтому я бы не сказал, что он, похоже, в этом не нуждается. Что, если бы он действительно хотел отправить форму и сохранить выбранное изображение, просто в качестве примера.

2. @MosiaThabo Зачем ему это нужно [2 ]? Это означало бы, что существует по крайней мере три элемента с young_adult атрибутом name, а не

3. Смехотворно! Я на самом деле имел в виду [1] , что за ошибка, приятель! смехотворно! Извините за это

Ответ №2:

Проблема в вашем атрибуте name="young_adult" . Вы используете document.getElementsByName("young_adult")[0] для доступа к элементам. Но по индексу [0] это <select> , а не <img> потому что <img> появляется только после <select> , следовательно, это не работает.

Чтобы это сработало, вам нужно будет изменить следующее:

Измените индекс на [1] в вашем javascript, и он должен работать.

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

 <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+Indian.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")[1];
    image.src = select.options[select.selectedIndex].value;
  }
</script><br />

<select id="income_race" name="young_adult" 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+Indian_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>

Вопрос:

Ответ №1:

Комментарии:

Ответ №2:

Вам также может понравиться

Можно ли передавать потоковое видео в браузер с помощью Microsoft Graph API?

Почему программные атаки на TPMS так редки? Как TPMS защищают от них?

Убедитесь, что второй подписчик запускается после того, как первый подписчик завершил извлечение в Google pub-подтема