Нужно получить переменную из поля для дальнейшего использования в скрипте

@Hilder · Регистрация: 08.03.2016

Студворк — интернет-сервис помощи студентам

В поле x1 ввожу переменную, нужно ее получить, чтобы в скрипте в функции "смена" в зависимости от величины переменной (1,2 или 3 и т.д.), введенной в поле x1, выводилась та или иная картинка по нажатию на кнопку "Вывести". Помогите получить переменную из поля x1 для дальнейшей работы, пожалуйста

<html>
<body>
<head>
<meta charset="UTF-8">
</head>
<img id=myimg src="mend.jpg" width="700" height="500" ><br>
<form action="1-1.php" method="GET">
x1:<input name="x1">
<input type="submit" value="Вывести" onclick="smena()">
</form>
<script>
var mas=["mend.jpg","H.jpg","He.jpg","Li.jpg"]; // Все названия картинок
var N = '<?php echo $x1;?>';
function smena()
{
if (N==1)
{document.getElementById("mying").src=ma s[1];
}
if (N==2)
{document.getElementById("mying").src=ma s[2];
}
if (N==3)
{document.getElementById("mying").src=ma s[3];
}
else break;
}
</script>
</body>
</html>

<?php
$x1=isset ($_GET['x1']) ? $_GET['x1']:"";
?>

@Goga5 · 09.03.2016, 10:22

Задача ясна, но зачем Вы использовали PHP, ведь PHP - это серверный язык, он выполняется только на сервере. А JavaScript - это клиентский язык. Все что на PHP у Вас выбрасываем. Хотя по Вашему пути пойти можно, тогда нужно использовать AJAX, мне неохота столько писать, поэтому можете обратиться к Alexsamos33 - это хороший специалист по AJAX. Если писать на JavaScript, то получится следующее:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<html>
<head>
<meta charset="UTF-8">
<title>Заголовок.</title>
</head>
<body>
<img id="myimg" src="mend.jpg" width="700" height="500" ><br>
<form action="1-1.php" method="GET">
X1:<input id="n1">
<input type="button" value="Вывести" onclick="smena()">
</form>
Один ментос и 2 омонтоса, чтобы чувствовать себя на рынке уверенно.
<script>
var mas = ["mend.jpg","H.jpg","He.jpg","Li.jpg"];//Все названия картинок
var N = 0;
function smena(){
N = parseInt(document.getElementById("n1").value);
switch(N){
case 1: document.getElementById("myimg").src=mas[0]; break;
case 2: document.getElementById("myimg").src=mas[1]; break;
case 3: document.getElementById("myimg").src=mas[2]; break;
case 4: document.getElementById("myimg").src=mas[3]; break;
default: break;}}
</script> 
</body>
</html>

JavaScript отдельно:

JavaScript
1
2
3
4
5
6
7
8
9
10
var mas = ["mend.jpg","H.jpg","He.jpg","Li.jpg"];//Все названия картинок
var N = 0;
function smena(){
N = parseInt(document.getElementById("n1").value);
switch(N){
case 1: document.getElementById("myimg").src=mas[0]; break;
case 2: document.getElementById("myimg").src=mas[1]; break;
case 3: document.getElementById("myimg").src=mas[2]; break;
case 4: document.getElementById("myimg").src=mas[3]; break;
default: break;}}

Хочу еще раз напомнить, что JavaScript - это клиентский язык, а PHP - это серверный язык. Скачивайте архив!

@Опан · 09.03.2016, 11:50

Должен заметить, что таким образом всё же произойдёт перенаправление на страницу 1-1.php для обработки на серверном языке. Чтобы этого не было, можно в строке 10 добавить return false:

HTML5
1
<input type="button" value="Вывести" onclick="smena();return false">

А из тега <form> можно убрать action="1-1.php" method="GET", если эта страница не нужна, или вообще убрать теги <form>...</form>, тогда и return false не придётся добавлять.
А функцию smena() можно оптимизировать, переписав так:

JavaScript
1
2
3
4
function smena(){
N = parseInt(document.getElementById("n1").value);
   document.getElementById("myimg").src=mas[N-1];
}

@Goga5 · 09.03.2016, 15:32

Опан, там submit не происходит потому что я исправил type с submit на button:
<input type="button" value="Вывести" onclick="smena()">
А оптимизация хорошая, да, я оценил.

@Опан · 09.03.2016, 15:45

Сообщение от Goga5

там submit не происходит потому что я исправил type с submit на button

Оказывается, да, действительно. А вот если бы вместо этого input был тег <button>...</button>, тогда submit бы происходил. Не думал, что в этом есть разница. Во-дела...

@Hilder · 09.03.2016, 23:55 **[ТС]**

Спасибо огромное, все работает шикарно!

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@Hilder 0 / 0 / 0 Регистрация: 08.03.2016 Сообщений: 3

	Нужно получить переменную из поля для дальнейшего использования в скрипте 08.03.2016, 21:33. Показов 619. Ответов 5 Метки нет (Все метки) В поле x1 ввожу переменную, нужно ее получить, чтобы в скрипте в функции "смена" в зависимости от величины переменной (1,2 или 3 и т.д.), введенной в поле x1, выводилась та или иная картинка по нажатию на кнопку "Вывести". Помогите получить переменную из поля x1 для дальнейшей работы, пожалуйста <html> <body> <head> <meta charset="UTF-8"> </head> <img id=myimg src="mend.jpg" width="700" height="500" ><br> <form action="1-1.php" method="GET"> x1:<input name="x1"> <input type="submit" value="Вывести" onclick="smena()"> </form> <script> var mas=["mend.jpg","H.jpg","He.jpg","Li.jpg"]; // Все названия картинок var N = '<?php echo $x1;?>'; function smena() { if (N==1) {document.getElementById("mying").src=ma s[1]; } if (N==2) {document.getElementById("mying").src=ma s[2]; } if (N==3) {document.getElementById("mying").src=ma s[3]; } else break; } </script> </body> </html> <?php $x1=isset ($_GET['x1']) ? $_GET['x1']:""; ?> 0

@Goga5 61 / 39 / 20 Регистрация: 06.12.2015 Сообщений: 155
	09.03.2016, 15:32
	Опан, там submit не происходит потому что я исправил type с submit на button: <input type="button" value="Вывести" onclick="smena()"> А оптимизация хорошая, да, я оценил. 0

@Hilder 0 / 0 / 0 Регистрация: 08.03.2016 Сообщений: 3
	09.03.2016, 23:55 [ТС]
	Спасибо огромное, все работает шикарно! 0