БЛОГ НА HUSL


Изменение цвета фона таблицы HTML по нажатию клавишы и компонента type="color"

Автор вопроса: ScreamOfSoul

Постараюсь описать кратко: По заданию требуется в таблице HTML добавить форму с кнопкой. Перед нажатием на кнопку пользователь выбирает цвет и номер одной ячейки. Все ячейки таблицы закрашиваются в этот цвет кроме выбранной. Попробовал реализовать выбор ячейки через таблицу кнопок и палитры color:

// И, соответственно, передаю id и name в функцию

function MyFunc(id, name) {
  var Elements = new Array();
  var SelectedColor = document.getElementByName("Color Picker");
  for (var i = 1; i <= 12; i++) {
    Elements[i - 1] = document.getElementById(i.toString() + "n");
  }
  for (var i = 0; i < 12; i++) {
    if (id == Elements[i]) continue;
    document.getElementById(Elements[i]).style.color = SelectedColor.value;
  }
}
Выберите ячейку:
<table border="1">
  <tr>
    <th><button style=" color: blue" id="n1"><i>Ячейка 1</i></button></th>
    <th><button style="background-color: red" id="n2">Ячейка 2</button></th>
    <th><button id="n3">Ячейка 3</button></th>
    <th><button id="n4">Ячейка 4</button></th>
  </tr>
  <tr>
    <th><button id="n5">Ячейка 5</button></th>
    <th><button id="n6">Ячейка 6</button></th>
    <th><button id="n7">Ячейка 7</button></th>
    <th><button id="n8">Ячейка 8</button></th>
  </tr>
  <tr>
    <th><button id="n9">Ячейка 9</button></th>
    <th><button id="n10">Ячейка 10</button></th>
    <th><button id="n11">Ячейка 11</button></th>
    <th><button id="n12">Ячейка 12</button></th>
  </tr>
</table>
<br> Выберите цвет и нажмите кнопку для изменения цвета фона всех ячеек кроме выбранной:
<form>
  <input type="color" name="Color Picker" />
  <input type="button" value="Подтвердитиь зименение ячейки" onclick="MyFunc">
</form>

Проблема заключается в том, что у меня не выходит получить значение value компонента color и передать его как параметр в стили background-color для кнопок. Если подскажите и объясните в чем ошибка буду очень благодарен!

P.S. В HTML и JS новичок


Источник

Ответы (3 шт):

Автор решения: Инквизитор

Value нужно брать сразу, а не пытаться получить его у переменной. Ну и куча мелких ошибок, держите код и удачи в разбирательстве =)

function MyFunc(cell_name) {
  var Elements = [];
  var SelectedColor = document.getElementById("ColorPicker").value;
  for (var i = 1; i <= 12; i++) {
    Elements[i - 1] = document.getElementById("n" + i.toString()).id;
  }
  for (var i = 0; i < 12; i++) {
    if (cell_name == Elements[i]) continue;
    else document.getElementById(Elements[i]).style.backgroundColor = SelectedColor;
  }
}
<body>
  Выберите ячейку:
  <table border="1">
    <tr>
      <th><button style=" color: blue" id="n1"><i>Ячейка 1</i></button></th>
      <th><button style="background-color: red" id="n2">Ячейка 2</button></th>
      <th><button id="n3">Ячейка 3</button></th>
      <th><button id="n4">Ячейка 4</button></th>
    </tr>
    <tr>
      <th><button id="n5">Ячейка 5</button></th>
      <th><button id="n6">Ячейка 6</button></th>
      <th><button id="n7">Ячейка 7</button></th>
      <th><button id="n8">Ячейка 8</button></th>
    </tr>
    <tr>
      <th><button id="n9">Ячейка 9</button></th>
      <th><button id="n10">Ячейка 10</button></th>
      <th><button id="n11">Ячейка 11</button></th>
      <th><button id="n12">Ячейка 12</button></th>
    </tr>
  </table>
  <br> Выберите цвет и номер кнопки и нажмите кнопку для изменения цвета фона всех кнопок кроме выбранной:
  <form>
    <input type="color" id="ColorPicker" />
    <input type="text" id="CellNumber" />
    <input type="button" value="Подтвердить изменение кнопки" onclick="MyFunc('n' + document.getElementById('CellNumber').value)">
  </form>
</body>

→ Ссылка
Автор решения: OPTIMUS PRIME
  1. onclick="MyFunc" — Такая запись в HTML, то же самое, что в JS:
element.onclick = function() {
  MyFunc
};

Т.е. просто упоминание названия функции в коде, это ничего не делает. Её нужно вызывать через скобки MyFunc(), и передать туда параметры.

  1. getElementByName - не функция. Есть getElementsByName который возвращает коллекцию элементов, откуда можно взять первый [0] элемент.

  2. i.toString() + "n" — перепутали местами, во-вторых, число не нужно дополнительно приводить к строке, она и так станет строкой, если её добавляют к строке. Должно быть "n" + i

  3. Elements[i] — и так уже ранее полученная ссылка на HTML-элемент. Не нужно её дополнительно отправлять в document.getElementById(Elements[i])

  4. С большой бувы принято называть функции-конструкторы. Обычные переменные - с маленькой.

В общем-то, «на месте» можно исправть это так:

function MyFunc(id) {
  var Elements = new Array();
  var SelectedColor = document.getElementsByName("Color Picker")[0];
  for (var i = 1; i <= 12; i++) {
    Elements[i - 1] = document.getElementById("n" + i);
  }
  for (var i = 0; i < 12; i++) {
    if (id == Elements[i]) continue;
    Elements[i].style.backgroundColor = SelectedColor.value;
  }
}
Выберите ячейку:
<table border="1">
  <tr>
    <th><button style=" color: blue" id="n1"><i>Ячейка 1</i></button></th>
    <th><button style="background-color: red" id="n2">Ячейка 2</button></th>
    <th><button id="n3">Ячейка 3</button></th>
    <th><button id="n4">Ячейка 4</button></th>
  </tr>
  <tr>
    <th><button id="n5">Ячейка 5</button></th>
    <th><button id="n6">Ячейка 6</button></th>
    <th><button id="n7">Ячейка 7</button></th>
    <th><button id="n8">Ячейка 8</button></th>
  </tr>
  <tr>
    <th><button id="n9">Ячейка 9</button></th>
    <th><button id="n10">Ячейка 10</button></th>
    <th><button id="n11">Ячейка 11</button></th>
    <th><button id="n12">Ячейка 12</button></th>
  </tr>
</table>
<br> Выберите цвет и нажмите кнопку для изменения цвета фона всех ячеек кроме выбранной:
<form>
  <input type="color" name="Color Picker" />
  <input type="button" value="Подтвердитиь зименение ячейки" onclick="MyFunc( document.getElementById('n2') )">
</form>

Но если в коде появляются нумерованные id - значит что-то идет не так!) Нумерацию текстов кнопок тоже можно было бы сделать не руками, а циклом. И у вас не реализован выбор клетки. Чтобы не возиться с циклами и хранением / переключением цвета при выборе активной кнопки, легче привязать все цвета к CSS, а через JS управлять переключением соответствующих значений. Около того:

create_table();

onclick_select_button();
onclick_change_colors();

/***/
function onclick_change_colors() {
  /*** При клике на "#btn" устанавливает новое значение для CSS-переменной --bg
  которая встроена в HTML-таблицу. От неё зависит цвет всех ячеек. ***/
  
  let table = document.querySelector("#table"); 
  let color = document.querySelector("#color");
  
  document.querySelector("#btn").addEventListener("click", function() {
    table.setAttribute("style", "--bg: " + color.value);
  });
}

function onclick_select_button() {
  /*** При клике на кнопку внутри таблицы, добавляет на эту кнопку класс-метку "active"
  К этому классу привязан background: red; у которого приоритет выше,
  чем у цветов всех остальных кнопок ***/
  
  let table = document.querySelector("#table");
  
  table.addEventListener("click", function(e) {
    if (e.target.tagName !== "BUTTON") return;
    
    let active = document.querySelector("#table button.active");
    if (active) active.classList.remove("active");
    // находит .active и удаляет у него этот класс
    
    e.target.classList.add("active");
    // добавляет на текущую кликнутую кнопку
  });  
}

function create_table() {
  let table = document.querySelector("#table");
  let cols = 4, rows = 3;
  
  let html = "";
  
  for (let i = 0; i < rows; i++) {
    html += "<tr>";
    
    for (let j = 0; j < cols; j++) { 
      html += "<td><button>Ячейка " + (i * cols + j + 1) + "</button></td>";
    }
    
    html += "</tr>";
  }

  table.innerHTML = html;
}
#table button {
  background-color: var(--bg);
}

#table button.active {
  background-color: red;
}
<input id="color" type="color"/>
<input id="btn" type="button" value="Изменить">
<hr>
<table id="table" border="1" style="--bg: transparent;"></table>

→ Ссылка
Автор решения: Инквизитор

Вот, например, можно сделать без перебора всех кнопок, предоставив эту задачу CSS-движку:

function MyFunc(button_nunmber) {
  document.getElementById("dynamic_css").innerText = "table button:not(.active):not(#" + button_nunmber + ") {background-color:" + document.getElementById("ColorPicker").value + ";}";
}
table button.active {
  background-color: red;
}
<body>
  Выберите ячейку:
  <table border="1">
    <tr>
      <th><button style=" color: blue" id="n1"><i>Ячейка 1</i></button></th>
      <th><button id="n2" class="active">Ячейка 2</button></th>
      <th><button id="n3">Ячейка 3</button></th>
      <th><button id="n4">Ячейка 4</button></th>
    </tr>
    <tr>
      <th><button id="n5">Ячейка 5</button></th>
      <th><button id="n6">Ячейка 6</button></th>
      <th><button id="n7">Ячейка 7</button></th>
      <th><button id="n8">Ячейка 8</button></th>
    </tr>
    <tr>
      <th><button id="n9">Ячейка 9</button></th>
      <th><button id="n10">Ячейка 10</button></th>
      <th><button id="n11">Ячейка 11</button></th>
      <th><button id="n12">Ячейка 12</button></th>
    </tr>
  </table>

  <style id="dynamic_css"></style>
  <br> Выберите цвет и номер кнопки и нажмите кнопку для изменения цвета фона всех кнопок кроме выбранной:
  <form>
    <input type="color" id="ColorPicker" />
    <input type="text" id="CellNumber" />
    <input type="button" value="Подтвердить изменение кнопки" onclick="MyFunc('n' + document.getElementById('CellNumber').value)">
  </form>
</body>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.