С Новым годом! Форум программистов, компьютерный форум, киберфорум
JavaScript для начинающих
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.82/11: Рейтинг темы: голосов - 11, средняя оценка - 4.82
0 / 0 / 0
Регистрация: 03.01.2017
Сообщений: 22

Работа с картинками

29.12.2017, 18:45. Показов 2254. Ответов 2
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Помогите пожалуйста. Имеется следующий код который должен менять картинки при щелчке на кнопку после выполнения заданной условии. первое фото загружается при запуске браузера, но при нажатии на кнопку фото не меняется. Подскажите пожалуйста в чём ошибка. Заранее благодарю))
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
72
73
74
<form>
<div class="kartinki" >
        <img id="wd" src = 'mass/11.jpg' /><br><br>
            <input id="trans"><br><br>
            <input type="button" value="Check" readonly="true" onclick="validateTrans(translation.value)">
            <input type="button" value="Next word" readonly="true" onclick="getNextWd()">
        </div>  
 
 
        <script type="text/javascript">
            var photo = new Array(); // массив из картинок
            photo[0]=new Image();
            photo[1]=new Image();
            photo[2]=new Image();
            photo[3]=new Image();
            photo[4]=new Image();
            photo[5]=new Image();
            photo[6]=new Image();
            photo[7]=new Image();
            photo[8]=new Image();
            photo[9]=new Image();
 
            photo[0].src="mass/11.jpg";
            photo[1].src="mass/2.jpg";
            photo[2].src="mass/3.jpg";
            photo[3].src="mass/4.jpg";
            photo[4].src="mass/5.jpg";
            photo[5].src="mass/6.jpg";
            photo[7].src="mass/7.jpg";
            photo[8].src="mass/8.jpg";
            photo[8].src="mass/9.jpg";
            photo[9].src="mass/10.jpg";
        
            var translations = ["Afraid", "Calm", "Disgusting", "Heroic", "Wise", "Innocent", "determined", "Climate", "Weather","Jungle"]; // слова для проверки описания
        
    var wd = document.getElementById('wd'); // поле для картинки
            var translation = document.getElementById('trans'); // текстовое поле для варианта описания
            var flag = false; // флаг, реализующий запреты на некорректные действия
 
            getNextWd(); // показать первое фото при загрузке страницы
 
            function validateTrans(strr) {
                if (!flag) {
                    alert('Правильно!!!');
                    return;
                }
                var check = translations.shift();
                if (check == strr.toLowerCase())
                    alert('Правильно!');
                else
                    alert('Не правильно!');
 
                flag = false;
            }
 
            function getNextWd() {
                if (photo.length == 0) {
                    alert('Конец!')
                    return;
                }
 
                if (flag) {
                    alert('Переведите имеющееся слово!');
                }
                else {
                    wd.value = photo.shift();
                    translation.value = '';
                }
 
                flag = true;
            }
        </script>   
    
</form>
0
Лучшие ответы (1)
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
29.12.2017, 18:45
Ответы с готовыми решениями:

Работа с картинками!
Всем доброго времени суток!У меня такой вопрос начну с того что javasript знаю очень плохо.Задача стоит такая! Есть такой блок с...

Работа с картинками в Javascript
Как в JS задавать свойства той же фотографии (например size, position и т.д.)? В html всё просто, можно было сразу же к тегу приписать...

Работа с картинками
Добрый день! Не могу понять как работать с картинками. Мне необходимо взять картинку из одной папки, изменить ее размер и переместить в...

2
Эксперт JSЭксперт HTML/CSS
2151 / 1496 / 651
Регистрация: 16.04.2016
Сообщений: 3,696
29.12.2017, 22:12
Лучший ответ Сообщение было отмечено Шукрона как решение

Решение

Шукрона, Если я правильно понял то, что прочитал...... Вот наверное то, что вам нужно(ваше нагромождение кода даже разбирать не стал, без обид) - песочница
HTML5
1
2
3
4
5
6
7
8
9
<form>
  <div class="kartinki"><img id="wd" src="https://dummyimage.com/100x100/999999/000000.png&amp;text=Afraid"/>
    <p>
      <input id="trans" type="text"/>
    </p>
    <input id="check" type="button" value="Check"/>
    <input id="next" type="button" value="Next word"/>
  </div>
</form>
JavaScript
1
2
3
var photo=["https://dummyimage.com/100x100/999999/000000.png&text=Afraid","https://dummyimage.com/100x100/c47676/000000.png&text=Calm","https://dummyimage.com/100x100/b978c2/000000.png&text=Disgusting","https://dummyimage.com/100x100/9378c2/000000.png&text=Heroic","https://dummyimage.com/100x100/7887c2/000000.png&text=Wise","https://dummyimage.com/100x100/78a7c2/000000.png&text=Innocent","https://dummyimage.com/100x100/78c2c0/000000.png&text=determind","https://dummyimage.com/100x100/78c2a2/000000.png&text=Climate","https://dummyimage.com/100x100/c2c278/000000.png&text=Weather","https://dummyimage.com/100x100/bd7d53/000000.png&text=Jungle"],translations = ["Afraid", "Calm", "Disgusting", "Heroic", "Wise", "Innocent", "determined", "Climate", "Weather","Jungle"],photoTemp=photo.slice();
check.onclick=function(){translations.map((e)=>{if(e.toLowerCase()==trans.value.toLowerCase())alert("Yea!!!")})}
next.onclick=function(){if(photoTemp.length!=0)wd.src=photoTemp.shift(); else {alert("Let's begin!");photoTemp=photo.slice();wd.src="https://dummyimage.com/100x100/999999/000000.png&text=Afraid";}}
P.S. проверки не писал. Просто пример, чтобы передать смысл.
1
0 / 0 / 0
Регистрация: 03.01.2017
Сообщений: 22
30.12.2017, 15:37  [ТС]
Спасибо большое)
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
30.12.2017, 15:37
Помогаю со студенческими работами здесь

Работа с картинками
Вcем привет. Кто может подсказать, в TBitmap находится картинка, её для наглядности нужно вывести по байтам в ( на пример в TMemo) . ...

Работа с картинками
так получаю координаты нужного квадратика, где x и y - координаты центра public String getSelectedRect() { return...

Работа с картинками
Доброе время суток! Подскажите пожалуйста как решить такую задачу (прикрепленная картинка). В интернете есть отдельные примеры как сделать...

Работа с картинками
Заинтересовался обработкой графики на Delphi. Пробовал написать небольшие процедурки типа появления, угасания на форме Использовал...

Работа с картинками
как сделать так, чтобы при клике на определённые картинки высвечивалось сообщение? например если кликнуть на определённые 4(Image) картинки...


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

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Новые блоги и статьи
Восстановить юзерскрипты Greasemonkey из бэкапа браузера
damix 15.01.2026
Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Изучаю kubernetes
lagorue 13.01.2026
А пригодятся-ли мне знания kubernetes в России?
Сукцессия микоризы: основная теория в виде двух уравнений.
anaschu 11.01.2026
https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/
WordPad для Windows 11
Jel 10.01.2026
WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .
Classic Notepad for Windows 11
Jel 10.01.2026
Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .
Почему дизайн решает?
Neotwalker 09.01.2026
В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .
Модель микоризы: классовый агентный подход 3
anaschu 06.01.2026
aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114
Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR
ФедосеевПавел 06.01.2026
Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru