При нажатии кнопки - отображение картинки в div

@ЕвгенийЧе · Регистрация: 11.01.2013

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

Всем привет, помогите плз, никак не могу понять как решить задачу. Необходимо, чтобы при нажатии кнопки в диве появлялась определенная картинка. Получилось только сделать для отображение текста в диве, который соответствует value, а вот как какртинку отобразить не пойму(. Можно конечно для каждой кнопки прописать функцию с конкретной ссылкой на картинку, но хочется написать универсальную функцию для всех кнопок

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
    #knopki table {border: solid 1px silver; border-spacing: 10px; background-color: #EEE; margin-left: 40%; border-radius: 15%; }
    #knopki table td {border-spacing: 139px;}
    input[type= button] {width: 50px; height: 40px; border-radius: 20%; margin: 3px 3px 3px 3px;}
    p {margin-left: 20%;}
</style>
    <script type="text/javascript">
 
        window.onload = function () {
 
            var clickButton = function () {
                addLine(this.value);
            }
 
            //создаем массив кнопок и вешаем на каждую кнопку событие онклик
            var inputs = document.getElementsByTagName("input");
            for (var i = 0; i < inputs.length; ++i) {
                inputs[i].onclick = clickButton;
            }
 
 
            //прописываем функцию addLine, которая создает параграф в теле документа и помещает в него аргумент функции - text - т.е. значение кнопки
            var addLine = function (text) {
                var newLine = document.createElement("p");
                newLine.innerHTML = text;
                document.body.appendChild(newLine);
            }
        }
         
    </script>
</head>
<body>
 
 
        <form name="calc" id="knopki">
    <table>
 
    <td class="buttons">
        <input type="button" id="one" value="1" >
        <input type="button" id="two" value="2" >
        <input type="button" id="three" value="3" >
        
        <br>
        <input type="button" id="four" value="4" >
        <input type="button" id="five" value="5" >
        <input type="button" id="six" value="6" >
        
        <br>
        <input type="button" id="seven" value="7" >
        <input type="button" id="eight" value="8" >
        <input type="button" id="nine" value="9" >
        
        <br>
        <input style="margin-left: 64px" type="button" id="zero" value="0" >
        
    </td>
    </tr>
    </table>
</form>
 
</body>
</html>

@vovandr · 06.01.2015, 00:43

Поправил ваш код для картинок, далее уже для того чтобы ничего не дублировалось и так далее думаю сами уже додумаетесь

JavaScript
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
27
28
29
30
31
32
33
34
35
36
37
window.onload = function () {
  // preload images
  var imageList = [
    'http://lorempixel.com/output/sports-q-c-100-100-3.jpg',
    'http://lorempixel.com/output/city-q-c-100-100-5.jpg',
    'http://lorempixel.com/output/people-q-c-100-100-3.jpg',
    'http://lorempixel.com/output/nature-q-c-100-100-6.jpg',
    'http://lorempixel.com/output/sports-q-c-100-100-8.jpg',
    'http://lorempixel.com/output/animals-q-c-100-100-9.jpg',
    'http://lorempixel.com/output/nature-q-c-100-100-2.jpg',
    'http://lorempixel.com/output/sports-q-c-100-100-7.jpg',
    'http://lorempixel.com/output/abstract-q-c-100-100-2.jpg',
    'http://lorempixel.com/output/abstract-q-c-100-100-4.jpg'
  ];
  
  for(var i = 0; i < imageList.length; i++ ) {
    var imageObject = new Image();
    imageObject.src = imageList[i];
  }
 
  var clickButton = function () {
    addLine(imageList[this.value]);
  } 
 
  //создаем массив кнопок и вешаем на каждую кнопку событие онклик
  var inputs = document.getElementsByTagName("input");
  for (var i = 0; i < inputs.length; ++i) {
    inputs[i].onclick = clickButton;
  }
 
  //прописываем функцию addLine, которая создает параграф в теле документа и помещает в него аргумент функции - text - т.е. значение кнопки
  var addLine = function (imagePath) {
    var newLine = document.createElement("p");
    newLine.innerHTML = '<img src="'+ imagePath +'">';
    document.body.appendChild(newLine);
    }  
  }

@ЕвгенийЧе · 06.01.2015, 13:40 **[ТС]**

Спасибо, вот что пролучилось. Нужно еще убрать некоторые кривости.

PHP/HTML
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
window.onload = function () {
        
        var imageList = [
        'one.jpg',
        'two.jpg',
        'three.jpg',
        'four.jpg',
        'five.jpg',
        'six.jpg',
        'seven.jpg',
        'vish.jpg',
        'vish.jpg'
        ];
        
        for(var i = 0; i <= imageList.length; i++ ) {
                var imageObject = new Image();
                imageObject.src = imageList[i];
                }
 
            var clickButton = function () {
                addLine(imageList[this.value -1]);
            }
 
            //создаем массив кнопок и вешаем на каждую кнопку событие онклик
            var inputs = document.getElementsByTagName("input");
            for (var i = 0; i < inputs.length; ++i) {
                inputs[i].onclick = clickButton;
            }
 
 
            //прописываем функцию addLine, которая создает параграф в теле документа и помещает в него аргумент функции - text - т.е. значение кнопки
            var addLine = function (imagePath) {
                var newLine = document.createElement("p");
                newLine.innerHTML = '<img src="'+ imagePath +'">';
                document.body.appendChild(newLine);
                }  
        } 
         
    </script>
</head>
<body>
 
 
        <form name="calc" id="knopki">
    <table>
 
    <td class="buttons">
        <input type="button" id="one" value="1" >
        <input type="button" id="two" value="2" >
        <input type="button" id="three" value="3" >
        
        <br>
        <input type="button" id="four" value="4" >
        <input type="button" id="five" value="5" >
        <input type="button" id="six" value="6" >
        
        <br>
        <input type="button" id="seven" value="7" >
        <input type="button" id="eight" value="8" >
        <input type="button" id="nine" value="9" >
        
        <br>
        <input style="margin-left: 64px" type="button" id="zero" value="0" >
        
    </td>
    </tr>
    </table>
</form>
 
</body>
</html>

Новые блоги и статьи Все статьи Все блоги /
Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .

При нажатии кнопки - отображение картинки в div

Решение