Поменяйте местами кнопки, чтобы выбрать - PullRequest
Новая
       3

Поменяйте местами кнопки, чтобы выбрать

0 голосов
/ 23 марта 2020

У меня есть что-то вроде этого 

document.getElementsByClassName("options")[0]
  .addEventListener("click", function(e) {
    if (e.target.classList.contains("line-type")) {
      // Remove active class from previous element
      document
        .querySelector(".line-type.is-active")
        .classList.remove("is-active");

      e.target.classList.add("is-active");
      currentLine = e.target.dataset.lineType;
      console.log("Current line: " + currentLine);
    }
  });
.line-type { font-weight:bold }
.is-active { color:red }
<div class="options">
  <div class="lines" id="lines">
    <div class="line-type water-pipe is-active" data-line-type="water">
      Water pipe
    </div>
    <div class="line-type electricity-line" data-line-type="electricity">
      Electricity line
    </div>
    <div class="line-type internet-line" data-line-type="internet">
      Internet line
    </div>
    <div class="water-pipe" id="test">
      RYSUJ TU
    </div>
  </div>
  <button id="clear-water-pipe">Clear active line</button>
</div>

Теперь он меняет цвет моей линии при нажатии кнопки, но я хотел бы полностью поменять его, чтобы выбрать, при изменении выбора мне нужно изменить Цвета и CurrentLine. Любой совет, как это сделать? Я никогда не перемещал кнопку в html выберите. Спасибо

1 Ответ

1 голос
/ 23 марта 2020

Вот начало 

const linesData = {
  water: {
    linePoints: [],
    lineLines: [],
    color: "blue"
  },
  electricity: {
    linePoints: [],
    lineLines: [],
    color: "yellow"
  },
  internet: {
    linePoints: [],
    lineLines: [],
    color: "gray"
  }
};

let currentType;
let sel = document.createElement("select");
sel.id = "lineType"
sel.appendChild(new Option("Please select", ""));
sel.addEventListener("change", function() {
  currentType = this.value ? linesData[this.value] : {}
  console.log(this.value, currentType)
})
Object.keys(linesData).forEach(key => {
  const title = key[0].toUpperCase() + key.slice(1) +" line";
  sel.appendChild(new Option(title, key));
});
document.getElementById("app").appendChild(sel)
<div id="app">
  <canvas id="canvas" width="500" height="350"></canvas>
</div>
...