CODEWITHSUNDEEP
javascriptjqueryhtmlselect
Kacper Sitarz
Kacper Sitarz

Reputation: 45

Swap buttons to select

I have something like this

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>

Now it changes my line color on click of the button but i would like to swap it totally to select, on select change i need to change colors and currentLine. Any tip how to do it? I never moved button into html select. Thanks

Upvotes: 0

Views: 52

Answers (1)

mplungjan
mplungjan

Reputation: 177691

Here is a start

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>

Upvotes: 1

Related Questions