Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.57/7: Рейтинг темы: голосов - 7, средняя оценка - 4.57
ЕвгенийЧе
0 / 0 / 1
Регистрация: 11.01.2013
Сообщений: 38
1

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

06.01.2015, 00:20. Просмотров 1355. Ответов 2
Метки нет (Все метки)

Всем привет, помогите плз, никак не могу понять как решить задачу. Необходимо, чтобы при нажатии кнопки в диве появлялась определенная картинка. Получилось только сделать для отображение текста в диве, который соответствует 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>
0
Лучшие ответы (1)
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
06.01.2015, 00:20
Ответы с готовыми решениями:

Отображение div'a при нажатии кнопки
Суть вот в чём. Есть кнопка,при нажатии на неё должен выводиться блок(div) и...

Имитация нажатии кнопки при нажатии ENTER в инпуте
Друзья подскажите пожалуйся не могу найти информацию Есть input type=&quot;text&quot;...

Событие при нажатии на div
В этом коде переворот на 180 градусов дива работает при наведении на него или...

Смена 4-х div классов при нажатии
Здравствуйте. Есть 4 DIV класса, один с них видимый, как при нажатии на...

Скрыть div при нажатии на него
Помогите решить проблему. Я в JS никакой. Если кто знает, напишите код,...

2
vovandr
631 / 519 / 194
Регистрация: 19.08.2013
Сообщений: 1,400
06.01.2015, 00:43 2
Лучший ответ Сообщение было отмечено ЕвгенийЧе как решение

Решение

Поправил ваш код для картинок, далее уже для того чтобы ничего не дублировалось и так далее думаю сами уже додумаетесь
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);
    }  
  }
1
ЕвгенийЧе
0 / 0 / 1
Регистрация: 11.01.2013
Сообщений: 38
06.01.2015, 13:40  [ТС] 3
Спасибо, вот что пролучилось. Нужно еще убрать некоторые кривости.
PHPHTML
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>
0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
06.01.2015, 13:40

Скрыть div при нажатии на кнопку
кто подскажет как скрыть div с кодом при нажатии на кнопку вместе с кнопкой...

Всплывающий div при нажатии на ссылку
как на рисунке. Звездочка - это ссылка. Маленькая такая ссылочка. Это то я...

Показать блок div при нажатии на картинку
Показать блок div при нажатии на картинку.Блок должен появляться по центру. ...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru