मेरे पास पृष्ठ पर एसवीजी तत्व हैं। मैं एक को बदलने की कोशिश करता हूं और फिर परिवर्तनों को रद्द करता हूं:

const button1 = document.getElementById('button1');
const button2 = document.getElementById('button2');
var elements = new Map();
var copy;

button1.addEventListener('click', event => {
   var svgns = "http://www.w3.org/2000/svg",
      container = document.getElementById( 'cont' );
   for (var x = 0; x < 500; x += 50) {
      var circle = document.createElementNS(svgns, 'circle');
      circle.setAttributeNS(null, 'cx', x);
      circle.setAttributeNS(null, 'cy', x);
      circle.setAttributeNS(null, 'r', 50);
      circle.setAttributeNS(null, 'style', 'fill: none; stroke: blue; stroke-width: 1px;' );
      elements.set(x, circle);
      container.appendChild(circle);   
   }
});

button2.addEventListener('click', event => {
   let element = elements.get(50);
   copy = element.cloneNode(true);
   element.style.fill = "red";
});

button3.addEventListener('click', event => {
   let element = elements.get(50);
   element = copy;
   //console.log(element);
});
<button id="button1">Build</button>
<button id="button2">Change</button>
<button id="button3">Revert</button>

<svg id="cont" height="1000" width="1000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
</svg>
-1
user14480036 17 सितंबर 2021, 13:00
1
"निरस्त" से आपका क्या मतलब है? क्या आपका मतलब तत्व को हटाना है?
 – 
codeinaire
17 सितंबर 2021, 13:08

1 उत्तर

सबसे बढ़िया उत्तर

element = copy केवल संदर्भ को DOM तत्व में बदलने जा रहा है, लेकिन स्वयं DOM को नहीं। उसके लिए आपको DOM API का उपयोग करना होगा।

तो उस असाइनमेंट को इसके साथ बदलें:

element.replaceWith(copy);
const button1 = document.getElementById('button1');
const button2 = document.getElementById('button2');
var elements = new Map();
var copy;

button1.addEventListener('click', event => {
   var svgns = "http://www.w3.org/2000/svg",
      container = document.getElementById( 'cont' );
   for (var x = 0; x < 500; x += 50) {
      var circle = document.createElementNS(svgns, 'circle');
      circle.setAttributeNS(null, 'cx', x);
      circle.setAttributeNS(null, 'cy', x);
      circle.setAttributeNS(null, 'r', 50);
      circle.setAttributeNS(null, 'style', 'fill: none; stroke: blue; stroke-width: 1px;' );
      elements.set(x, circle);
      container.appendChild(circle);   
   }
});

button2.addEventListener('click', event => {
   let element = elements.get(50);
   copy = element.cloneNode(true);
   element.style.fill = "red";
});

button3.addEventListener('click', event => {
   let element = elements.get(50);
   element.replaceWith(copy);
});
<button id="button1">Build</button>
<button id="button2">Change</button>
<button id="button3">Revert</button>

<svg id="cont" height="1000" width="1000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
</svg>
2
trincot 17 सितंबर 2021, 13:20