При клике на елемент появляется строка цвета фона

209

13 июля 2018, 12:20

    window.onload = function() { 
      "use strict"; 
      var Doshka = document.createElement('DIV'); 
      Doshka.className = "Doshka"; 
      document.getElementById('chess').appendChild(Doshka); 
      //document.body.appendChild(Doshka); 
      var ji = document.querySelector('img'); 
      var m = 1; 
      var g = 8; 
      var attrt, cordinatesp; 
 
      var cordinates = [ 
        [1,8],[2,8],[3,8],[4,8],[5,8],[6,8],[7,8],[8,8], 
        [1,7],[2,7],[3,7],[4,7],[5,7],[6,7],[7,7],[8,7], 
        [1,6],[2,6],[3,6],[4,6],[5,6],[6,6],[7,6],[8,6], 
        [1,5],[2,5],[3,5],[4,5],[5,5],[6,5],[7,5],[8,5], 
        [1,4],[2,4],[3,4],[4,4],[5,4],[6,4],[7,4],[8,4], 
        [1,3],[2,3],[3,3],[4,3],[5,3],[6,3],[7,3],[8,3], 
        [1,2],[2,2],[3,2],[4,2],[5,2],[6,2],[7,2],[8,2], 
        [1,1],[2,1],[3,1],[4,1],[5,1],[6,1],[7,1],[8,1] 
      ]; 
      var DoshkaSel = document.querySelector('.Doshka'); 
      for (var i = 0; i < 64; i++) { 
        var klitynka = document.createElement('DIV'); 
        var figure = document.createElement('IMG'); 
        if (i % 8) { 
          m += 1; 
          g -= 1; 
        } 
        if (m % 2) { 
          klitynka.className = "KlitN"; 
        } else { 
          klitynka.className = "Klit"; 
        } 
        klitynka.id = i; 
        DoshkaSel.appendChild(klitynka); 
        klitynka.appendChild(figure); 
        figure.onclick = function Choosing(event) { 
          attrt = event.target.getAttribute('src'); 
          event.target.setAttribute('src', ''); 
          cordinatesp = klitynka.getAttribute('id'); 
        }; 
        switch (i) { 
          case 0: 
            figure.setAttribute('src', 'https://cdnw.nickpic.host/mMym9J.png') 
            break; 
          case 7: 
            figure.setAttribute('src', '55.gif') 
            break; 
          case 1: 
            figure.setAttribute('src', '44.gif') 
            break; 
          case 6: 
            figure.setAttribute('src', '44.gif') 
            break; 
          case 2: 
            figure.setAttribute('src', '33.gif') 
            break; 
          case 5: 
            figure.setAttribute('src', '33.gif') 
            break; 
          case 3: 
            figure.setAttribute('src', '77.gif') 
            break; 
          case 4: 
            figure.setAttribute('src', '66.gif') 
            break; 
          case 8: 
            figure.setAttribute('src', 'https://cdnw.nickpic.host/mMym9J.png') 
            break; 
          case 9: 
            figure.setAttribute('src', '11.png') 
 
            break; 
          case 10: 
            figure.setAttribute('src', '11.png') 
 
 
            break; 
          case 11: 
            figure.setAttribute('src', '11.png') 
 
 
            break; 
          case 12: 
            figure.setAttribute('src', '11.png') 
 
 
            break; 
          case 13: 
            figure.setAttribute('src', '11.png') 
 
 
            break; 
          case 14: 
            figure.setAttribute('src', '11.png') 
 
 
            break; 
          case 15: 
            figure.setAttribute('src', '11.png') 
 
 
            break; 
          case 63: 
            figure.setAttribute('src', '5.gif') 
 
 
            break; 
          case 56: 
            figure.setAttribute('src', '5.gif') 
 
 
            break; 
          case 62: 
            figure.setAttribute('src', '4.gif') 
 
 
            break; 
          case 57: 
            figure.setAttribute('src', '4.gif') 
 
 
            break; 
          case 61: 
            figure.setAttribute('src', '3.gif') 
 
 
            break; 
          case 58: 
            figure.setAttribute('src', '3.gif') 
 
 
            break; 
          case 60: 
            figure.setAttribute('src', '6.jpeg') 
 
 
            break; 
          case 59: 
            figure.setAttribute('src', '7.gif') 
            break; 
          case 55: 
            figure.setAttribute('src', '1.png') 
            break; 
          case 54: 
            figure.setAttribute('src', '1.png') 
            break; 
          case 53: 
            figure.setAttribute('src', '1.png') 
            break; 
          case 52: 
            figure.setAttribute('src', '1.png') 
            break; 
          case 51: 
            figure.setAttribute('src', '1.png') 
            break; 
          case 50: 
            figure.setAttribute('src', '1.png') 
            break; 
          case 49: 
            figure.setAttribute('src', '1.png') 
            break; 
          case 48: 
            figure.setAttribute('src', '1.png') 
            break; 
        } 
      } 
    }

    .Doshka { 
      width: 640px; 
      height: 640px; 
      background-color: red; 
      border: 1px solid black; 
    } 
 
    .Klit { 
      width: 80px; 
      height: 80px; 
      background-color: white; 
      display: inline-block; 
    } 
 
    .KlitN { 
      width: 80px; 
      height8: 80px; 
      display: inline-block; 
    }

    <div id="chess"></div>

Answer 1

Цвет клеток никакого отношения к этому поведению не имеет.

    figure.onclick = function Choosing(event) {
      attrt = event.target.getAttribute('src');
      //event.target.setAttribute('src', '');
      event.target.style.display = "none";
      cordinatesp = event.target.parentNode.getAttribute('id');
    };
.Doshka img {
  vertical-align:middle;
}