Question

我正在用Javascript编写一个调查应用程序。这是一个想法：在.js文件中有一些问题和答案，然后我通过单击按钮动态地将它们显示在屏幕上。答案放在圈子中，也作为节点动态添加并附加到svg。但是现在我遇到了一个问题：当我点击下一个时，旧的圆圈不会消失并与新的重叠。

如何让圆圈消失？

谢谢！

let optionNr = questionsAndAnswers.allQuestions[l].answers.length;
let unit = (1920 - offSet * 2) / (optionNr * 2);


i = 0;

while (i < optionNr) {
   var svgNode = document.getElementsByTagName('svg')[0];  
   let newCircle = document.createElementNS("http://www.w3.org/2000/svg", 'circle');      
   i++;



              let centerX = offSet + (unit * (i* 2  - 1));                                            
              newCircle.setAttribute("class","circle");                                              
              newCircle.setAttribute("cx",centerX);                                                  
              newCircle.setAttribute("cy","850");                                                    
              newCircle.setAttribute("r","150");                                                     
              newCircle.style.stroke = "black";                                                      
              newCircle.style.strokeWidth = "2px";                                                   
              newCircle.style.opacity = circleOpacity[i-1];                                          
              newCircle.style.fill = circleColour[i-1];
              svgNode.appendChild(newCircle);                                                        


              let answerID = "answers" + i;
              let newAnswer = document.createElementNS("http://www.w3.org/2000/svg", 'text');        
              newAnswer.setAttribute("class", "answer");                                             
              newAnswer.setAttribute("id", answerID);                                                
              newAnswer.setAttribute("x",centerX);                                                   
              newAnswer.setAttribute("y","860");                                                     
              newAnswer.setAttribute("text-anchor","middle");                                        
              newAnswer.setAttribute("font-size","46");                                              
              newAnswer.setAttribute("fill","cyan");                                                
              svgNode.appendChild(newAnswer);                                                        
              document.getElementById(answerID).textContent = questionsAndAnswers.allQuestions[l].answers[answerNumber];


}

JS + SVG圈重叠

0 个答案: