用户使用 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>

大家好，如何在用户使用 javascript/jquery 单击图像后启用按钮。

例如，如果用户选择颜色并自动填充图像，则保存按钮将启用，但如果用户未自动填充任何内容，则保存按钮将保持禁用状态。

Answer 1

当用户单击该事件时，将禁用的按钮设置为 false。 这可以通过添加到事件侦听器以单击 SVG 元素父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

给定现有代码，最简单的方法是添加一行以在按下图像时将按钮的disabled属性设置为false 。

这可以通过添加来完成

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

到处理点击的 function。

这是工作代码：

 (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>