Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.03.2020, 13:38
Интересующийся
Отправить личное сообщение для Улан Посмотреть профиль Найти все сообщения от Улан
 
Регистрация: 22.02.2020
Сообщений: 13

Почему код не выполняется при type="image" а при type="radio" выполняется?
Надеюсь за обращение вопросами не будете ругаться. Тут мне уже помогали еще с утра, а дальше все еще мучаюсь. был шаблон radio кнопками, теперь вместо radio необходимо было вставить картинки, пробовал менять все не получается. да согласен сам еще тупой пока по js, но для меня это и есть практика. подскажете?https://codepen.io/tu03422/pen/PoqJJqb?editors=1010
Ответить с цитированием
  #2 (permalink)  
Старый 05.03.2020, 14:01
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,139

Улан
сделайте через классы.

document.imageControl.imgChange это только type="radio в данном случае


и на всякий случай
<input type="image"> - это кнопка отправки формы

Последний раз редактировалось рони, 05.03.2020 в 14:07.
Ответить с цитированием
  #3 (permalink)  
Старый 05.03.2020, 15:30
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 652

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" lang="ru">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" >
  <title>TESTE </title>
<style>
/* Прячем input за img */
label>img {
	position:relative;
	height: 100px;
	z-index: 1;
}
label>input {
	position:relative;
	left: -30px;
	top: -30px;
}
</style>
<script>
</script>
</head>

<body>
<div class="input_block">  
    <legend>Выберите вариант</legend>

<form name="imageControl">
<fieldset style="border: 2px solid #1221; border-radius: 10px; width:500px; height:250px;">
<label for="im1">
<img  src="http://html-plus.in.ua/wp-content/uploads/examples/js-examples/cups/cup4.png" >
<input type="radio" class="input_img" name="imgChange" id="im1" value="http://html-plus.in.ua/wp-content/uploads/examples/js-examples/cups/cup4.png">
</label>
<label for="im2">
<img  src="http://html-plus.in.ua/wp-content/uploads/examples/js-examples/cups/cup2.jpg" >
<input type="radio" class="input_img" name="imgChange" id="im2" value="http://html-plus.in.ua/wp-content/uploads/examples/js-examples/cups/cup2.jpg">
</label>
<label for="im3">
<img  src="http://html-plus.in.ua/wp-content/uploads/examples/js-examples/cups/cup3.jpg" >
<input type="radio" class="input_img" name="imgChange" id="im3" value="http://html-plus.in.ua/wp-content/uploads/examples/js-examples/cups/cup3.jpg">
</label>
<br>
<label for="im4">
<img  src="http://html-plus.in.ua/wp-content/uploads/examples/js-examples/cups/cup1.jpg" >
<input type="radio" class="input_img" name="imgChange" id="im4" value="http://html-plus.in.ua/wp-content/uploads/examples/js-examples/cups/cup1.jpg">
</label>
<label for="im5">
<img  src="http://html-plus.in.ua/wp-content/uploads/examples/js-examples/cups/cup1.jpg" >
<input type="radio" class="input_img" name="imgChange" id="im5" value="http://html-plus.in.ua/wp-content/uploads/examples/js-examples/cups/cup1.jpg">
</label>
<label for="im6">
<img  src="http://html-plus.in.ua/wp-content/uploads/examples/js-examples/cups/cup2.jpg" >
<input type="radio" class="input_img" name="imgChange" id="im6" value="http://html-plus.in.ua/wp-content/uploads/examples/js-examples/cups/cup2.jpg">
</label>
</fieldset>
</form>

</div>
<div>
	<img id='imres' >
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
	document.querySelectorAll('input[type=radio]').forEach (inp => {
		inp.addEventListener('change', (ev) => {
			let ichecked = document.querySelector('input[type=radio]:checked')
			document.getElementById('imres').src = ichecked.value 
		})
	})
})
</script>
</body>
</html>
Ответить с цитированием
  #4 (permalink)  
Старый 06.03.2020, 06:19
Интересующийся
Отправить личное сообщение для Улан Посмотреть профиль Найти все сообщения от Улан
 
Регистрация: 22.02.2020
Сообщений: 13

Огромное Вам спасибо! еще раз спасибо! и много раз спасибо! я бы давно перестал изучать этот пока непонятный мне JS без таких как ВЫ людей добрых!!!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Необъяснимое поведение прокрутки при использовании homekey demoniqus Events/DOM/Window 2 26.08.2019 11:05
Не работает код, при дублировании блоков! Rockship Элементы интерфейса 8 17.06.2015 12:47
Блокировка запуска скрипта при повторном нажатии если скрипт досих пор выполняется BesTime jQuery 4 20.12.2013 16:24
Почему скрипт отрабатывает в IE только при первом входе на сайт? tygeddar Элементы интерфейса 3 20.09.2012 01:37
Как выполнить код javascript при инклюде странички на php wfire jQuery 7 27.05.2011 14:43