Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
 
0 / 0 / 0
Регистрация: 23.01.2019
Сообщений: 3
1

Подскажите , в чем проблема

23.01.2019, 22:37. Просмотров 457. Ответов 5
Метки нет (Все метки)

Программа генерирует таблицу из одинаковых квадратов и прописывает каждому разный id и одинаковый background . Пытаюсь к каждому элементу таблицы привязать событие , по клику смена картинки backgrounda , но обработчик работать не хочет. Ошибку тоже не выдает . Может кто подскажет ?

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
38
39
40
41
42
43
44
45
46
47
48
49
<html>
  <body>
     
    
     <script type="text/javascript">
function tableCreate(){
    var body = document.body,
        tbl  = document.createElement('table');
    tbl.style.tableLayout='fixed';
    tbl.style.margin='auto';
 
    for(var i = 0; i < 10; i++){
        var tr = tbl.insertRow();
       // tr.appendChild(document.createTextNode(i));
       //  tr.style.width  = '0px';
        for(var j = 0; j < 10; j++){
                var td = tr.insertCell();
                td.style.height  = '16px';
                 td.style.width  = '16px';
                 td.style.background= "url('rId9.png')";
                  td.style.backgroundRepeat = 'no-repeat';
                  td.style.backgroundSize = '100%';
                 td.setAttribute('class', 'cell');
                 td.setAttribute('id', i+''+j);
               //  td.appendChild(document.createTextNode());
                 td.style.border = '1px solid black';
        }
    }
    body.appendChild(tbl);
}
  tableCreate();
 
      window.onload = init;
       function init() {
           //tableCreate();
    var a = document.getElementsByTagName("td");
     for(var i=0;i<a.length;i++){ 
    a[i].onclick = answer;
     }}
        function answer() {
        if (this.style.background == "url('rId9.png')"){ this.style.background = "url('rId17')" ; }    
        return false;
    }
      //  var a = document.getElementById("01");
        // alert(a.style.background );
 
      </script>
  </body>
</html>
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
23.01.2019, 22:37
Ответы с готовыми решениями:

Вычисление периметра, площади и объема. Подскажите в чем проблема,не возможно ввести данные на периметр и объем
&lt;! DOCTYPE HTML PUBLIC &quot;-//IETF//DTD HTML 3.2 // EN&quot; &gt; &lt;html&gt; &lt;head&gt; &lt;script&gt; Begin ...

Подскажите в чем проблема?
Такая вещь: 1 раз утром комп включаю все нормально гдето мин через 5 картинка зависает,...

Подскажите в чем проблема?
Есть прога на Oracle 8i и вот недавно накрылся винт, струдом востановив его, прога перестала...

Подскажите в чем проблема?
======================= function yy=graf228(x,A,B) yy=A*sin(6*x.^3)+B*3*cos(x.^2); end...

5
169 / 143 / 68
Регистрация: 02.10.2011
Сообщений: 611
23.01.2019, 22:51 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
38
39
function tableCreate() {
  var body = document.body,
    tbl = document.createElement('table');
  tbl.style.tableLayout = 'fixed';
  tbl.style.margin = 'auto';
 
  for (var i = 0; i < 10; i++) {
    var tr = tbl.insertRow();
    for (var j = 0; j < 10; j++) {
      var td = tr.insertCell();
      td.style.height = '16px';
      td.style.width = '16px';
      td.style.backgroundImage = "url('rId9.png')";
      td.style.backgroundRepeat = 'no-repeat';
      td.style.backgroundSize = '100%';
      td.setAttribute('class', 'cell');
      td.setAttribute('id', i + '' + j);
      td.style.border = '1px solid black';
    }
  }
  body.appendChild(tbl);
}
 
function init() {
  tableCreate();
  var a = document.getElementsByTagName("td");
  for (var i = 0; i < a.length; i++) {
    a[i].onclick = answer;
  }
}
 
function answer() {
  if (this.style.backgroundImage == "url('rId9.png')") {
    this.style.backgroundImage = "url('rId17')";
  }
  return false;
}
 
init();
https://jsfiddle.net/e1thL8uz/1/
0
0 / 0 / 0
Регистрация: 23.01.2019
Сообщений: 3
23.01.2019, 23:06  [ТС] 3
И ? Обработчик все так же не работает (
0
dev - investigator
Эксперт JSЭксперт HTML/CSS
2109 / 1458 / 644
Регистрация: 16.04.2016
Сообщений: 3,666
24.01.2019, 01:26 4
Fess3000, для примера сделал фон цветом, но в стилях думаю Вы сами расскоментируете строки и уберете лишнее. Пример прост как валенки, разбирётесь - https://codepen.io/qwerty_wasd/pen/bzdWmM
CSS
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
*,
*:after,
*:before {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  outline: 0;
}
 
/*стили выше добавлены только для этого примера, в реальном проекте используйте normalize.css\reset.css*/
#tbl-test {
  margin: auto;
}
#tbl-test tr > td {
  height: 16px;
  width: 16px;
  border: 1px solid #000;
  background: blue;
  /* background: url('rId9.png') no-repeat center; */
  /* background-size: cover; */
  cursor: pointer;
}
 
.red {
  background: red !important;
  /* background: url('rId17.png') no-repeat center !important; */
  /* background-size: cover!important; */
}
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
window.opEvents = {
  cClick: e => e.target.tagName === `TD` ? e.target.classList.toggle(`red`) : false,
  wLoad: () => {
    document.body.insertAdjacentHTML(`beforeend`, `<table id='tbl-test'>${[...Array(10).keys()].map(() => `<tr>${[...Array(10).keys()].map(() => `<td></td>`).join``}</tr>`).join``}</table>`);
    document.getElementById(`tbl-test`).addEventListener(`click`, opEvents.cClick);
  }
}
window.addEventListener(`load`, opEvents.wLoad);
window.addEventListener(`unload`, () => {
  window.removeEventListener(`load`, opEvents.wLoad);
  opEvents = undefined;
});
0
0 / 0 / 0
Регистрация: 23.01.2019
Сообщений: 3
24.01.2019, 20:22  [ТС] 5
Qwerty_Wasd, Спасибо большое! Но все же хотелось бы узнать , что именно в моем коде сделано не так ?Я только учусь и хочу понять , почему он не работает.
0
dev - investigator
Эксперт JSЭксперт HTML/CSS
2109 / 1458 / 644
Регистрация: 16.04.2016
Сообщений: 3,666
25.01.2019, 08:27 6
Fess3000,
Цитата Сообщение от Fess3000 Посмотреть сообщение
Но все же хотелось бы узнать , что именно в моем коде сделано не так ?Я только учусь и хочу понять , почему он не работает.
Ошибка в Вашем коде была в 41 строке.
сравните эту строку со своей, посмотрите на кавычки
Javascript
1
if (this.style.backgroundImage === 'url("rId9.png")')
А свой код я предоставил потому что Вы
Цитата Сообщение от Fess3000 Посмотреть сообщение
Я только учусь
. Просто будет один из примеров, как можно было бы сделать, не городя.
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
25.01.2019, 08:27

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

Подскажите, в чем проблема?
program DiskrModel; uses crt,graph; type ta1=array of integer ; ta2=array of integer; ...

Подскажите в чем проблема?
Ноутбук Asus K52 приобрел 10.10.11 и через пару дней он начал очень сильно тормозить,очень часто...

Подскажите в чем проблема?
static void Main(string args) { int X; int Y; ...

SerialPort. Подскажите в чем проблема?
private void buttonSEND_Click(object sender, EventArgs e) { ...


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

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

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