javascript – I select a red color then if I click the upper left in the second image it becomes red-ThrowExceptions

Exception or error:

This is my actual output

enter image description here

This is the picture I want to do but I don’t know how to do it.

enter image description here

HTML and svg Code :

 td style="width: 5%;"><svg class="teeth" 
 width="400px" height="300px" viewBox="0 0 400 300" preserveAspectRatio="xMidYMid meet">
    <!-- upper right 8 -->
    <g id="molar-group" class="molar">
        <rect x="75" y="75" stroke="black" id="disto-occlusal" style="stroke-width: 5px;" width="125" height="150" fill="white"/>
        <rect x="200" y="75" stroke="black" id="mesio-occlusal" style="stroke-width: 5px;" width="125" height="150" fill="white"/>

        <polygon stroke="black" id="disto-buccal" style="stroke-width: 5px;" points="0 0 200 0 200 75 75 75" fill="white" />
        <polygon stroke="black" id="mesio-buccal" style="stroke-width: 5px;" points="200 0 400 0 325 75 200 75" fill="white" />

        <polygon stroke="black" id="mesial" style="stroke-width: 5px;" points="400 0 400 300 325 225 325 75" fill="white" />

        <polygon stroke="black" id="mesio-palatal" style="stroke-width: 5px;" points="400 300 200 300 200 225 325 225" fill="white" />
        <polygon stroke="black" id="disto-palatal" style="stroke-width: 5px;" points="200 300 0 300 75 225 200 225" fill="white" />

        <polygon stroke="black" id="distal" style="stroke-width: 5px;" points="0 300 0 0 75 75 75 225" fill="white" />
    </g>
</svg></td>

<td>
  <select class="color" id="color">  
              <option value="" >Select Color</option>
              <option value="black" >Black</option> 
              <option value="red" >Red</option> 
      </select> 
</td>

In select color, if I select the red color the image I want to fill it becomes red.

For Example, I select a red color then if I click the upper left in the second image it becomes red.

I know this is the Javascript function but I don’t know how to do.

How to solve:

You can attach a click event listener and then change the fill css property for SVG elements.

(function() {
  var select = document.getElementById('color');
  document.querySelectorAll('svg g *').forEach(el => {
    el.addEventListener('click', function() {
      this.style.fill = select.value;
    });
  });
})();

function saveAsBase64() {
  let str = `data:image/svg+xml;base64,${window.btoa(new XMLSerializer().serializeToString(document.getElementById("svg")))}`;
  console.log(str);
}
<svg id="svg" class="teeth" width="200px" height="150px" viewBox="0 0 400 300" preserveAspectRatio="xMidYMid meet">
    <!-- upper right 8 -->
    <g id="molar-group" class="molar">
        <rect x="75" y="75" stroke="black" id="disto-occlusal" style="stroke-width: 5px;" width="125" height="150" fill="white"/>
        <rect x="200" y="75" stroke="black" id="mesio-occlusal" style="stroke-width: 5px;" width="125" height="150" fill="white"/>

        <polygon stroke="black" id="disto-buccal" style="stroke-width: 5px;" points="0 0 200 0 200 75 75 75" fill="white" />
        <polygon stroke="black" id="mesio-buccal" style="stroke-width: 5px;" points="200 0 400 0 325 75 200 75" fill="white" />

        <polygon stroke="black" id="mesial" style="stroke-width: 5px;" points="400 0 400 300 325 225 325 75" fill="white" />

        <polygon stroke="black" id="mesio-palatal" style="stroke-width: 5px;" points="400 300 200 300 200 225 325 225" fill="white" />
        <polygon stroke="black" id="disto-palatal" style="stroke-width: 5px;" points="200 300 0 300 75 225 200 225" fill="white" />

        <polygon stroke="black" id="distal" style="stroke-width: 5px;" points="0 300 0 0 75 75 75 225" fill="white" />
    </g>
</svg>


<select class="color" id="color">
  <option value="red">Red</option>
  <option value="black">Black</option>
</select>

<button onclick="saveAsBase64()">Save as Base64</button>

Leave a Reply

Your email address will not be published. Required fields are marked *