How to enable the button once the user clicked the image using javascript

Question

 (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); } document.getElementById("btnsave").disabled = true;

 <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 type="submit" id="btnsave">Save </button>

Hello Guys, How to enable the button once the user clicked the image using javascript/jquery.

For example, If the user selects the color and fills in the image automatic the save button will be enabled but if the user doesn't fill anything automatic the save button remains disabled.

Answer 1

When the user clicks on that event set the button disabled to false. This can be done by adding to the event listener for clicking on the SVG element parent svg g * .

 let button = document.getElementById("btnsave"); let svgEl = document.querySelectorAll('svg g *'); let select = document.getElementById('color'); (function() { svgEl.forEach(el => { el.addEventListener('click', function() { this.style.fill = select.value; button.disabled = false; }); }); })(); button.disabled = true; 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 type="submit" id="btnsave">Save </button> <h2>How to enable the button once the user clicked the image using javascript</h2> <p> If the user selects the color and fills in the image automatic the save button will be enabled but if the user doesn't fill anything automatic the save button remains disabled.</p>

Answer 2

Given the existing code, the easiest way to do it is to add a line to set the disabled property of the button to false when the image is pressed.

This can be done by adding

document.getElementById("btnsave").disabled = false;

to the function that handles clicks.

Here's the working code:

 (function() { var select = document.getElementById('color'); document.querySelectorAll('svg g *').forEach(el => { el.addEventListener('click', function() { this.style.fill = select.value; document.getElementById("btnsave").disabled = false; }); }); })(); function saveAsBase64() { let str = `data:image/svg+xml;base64,${window.btoa(new XMLSerializer().serializeToString(document.getElementById("svg")))}`; console.log(str); } document.getElementById("btnsave").disabled = true;

 <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 type="submit" id="btnsave">Save </button>