Задать вопрос
NitroMen
@NitroMen
Beginner in Java
javascript

Как получить данные из поля от пользователя и вставить картину по его значению?

Написал простенький код, для того чтобы пользователь мог вводить имя картинки в поле и потом выбирал разрешение картинки, и после нажатия кнопки все вышло. Подскажите в чем промах? Код предоставил ниже 

<!DOCTYPE html>
<html>
	<head>
		<title>HW4</title>
        <script>
			function myFunction() {
            	let source = document.getElementById("numb").value;
                var image = document.getElementsByClassName("image1");
                image.src = source;
                var valuey = valuey.valuey.options[0];
                var valuex = valuex.valuex.options[0];
                switch(valuey) {
                	case 100:
                    	image.style.width = '100px';
                    case 200:
                    	image.style.width = '200px';
                    case 300:
                    	image.style.width = '300px';
                 }
                 switch(valuex) {
                	case 100:
                    	image.style.height = '100px';
                    case 200:
                    	image.style.height=  '200px';
                    case 300:
                    	image.style.height = '300px';
                 }
            }
		</script>
	</head>
	<body>
		<input id="numb">
        <img id="image1">
        <form name="valuey">
        <select name="valuey" id="valuey">
        	<option valuey="100">100</option>
        	<option valuey="200">200</option>
        	<option valuey="300">300</option>
        </select>
        </form>
        <form name="valuex">
        <select name="valuex" id="valuex">
        	<option valuex="100">100</option>
        	<option valuex="200">200</option>
        	<option valuex="300">300</option>
        </select>
        </form>
        <button type="button" onclick="myFunction()">Submit</button>
        
       
	</body>
</html>
  • Вопрос задан
  • 129 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Помогут разобраться в теме Все курсы
  • Нетология
    Fullstack-разработчик на Python + нейросети
    20 месяцев
    Далее
  • Skillfactory
    Профессия Веб-разработчик
    12 месяцев
    Далее
  • Академия Eduson
    Fullstack-разработчик на JavaScript
    11 месяцев
    Далее
Решения вопроса 2
wapster92
@wapster92 Куратор тега JavaScript
У тебя js код обращается к элементам которых еще нет, хочешь меньше делать таких глупых ошибок - всегда вставляй js перед </body>

var valuey = valuey.valuey.options[0];
var valuex = valuex.valuex.options[0];
Здесь неверное обращение valuex.options[0];
Но опять же подход не верен. Тебе нужно смотреть не на значение опции, а на значение селекта valuex.value
И лучше обращаться к dom не по значению имени переменной из id, а через методы по работе с dom
Ответ написан
1 комментарий
1 комментарий
AndrewMarty
@AndrewMarty
Frontend
Вот быстренько накидал, может вам поможет
Ответ написан
3 комментария
3 комментария
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Разработчик (Next.js / JavaScript / TypeScript)
App Company
от 200 000 до 300 000 ₽
Web-разработчик/WordPress программист (Full-stack)
JustBusiness • Санкт-Петербург
от 130 000 до 150 000 ₽
Верстальщик / фронтендер для браузерного расширения
DevTeam.Space
от 1 000 до 2 000 $
Ещё вакансии