выберите опцию и измените объект приличия svg

Question

Я хочу выбрать опцию в поле со списком html и изменить SVG-код.

это код, который у меня есть проблемы:

мой объект:

<svg width="50" height="50" xmlns="http://www.w3.org/2000/svg">  
       <rect id="cercle1" x="0" y="0" width="50" height="50" stroke-width="1" stroke="#0E0E0E" style="fill:red; stroke:black; stroke-width:2"; /> 
      </svg> 

<select onchange="select()" id="selectobject"> 
      <option value="rect" >Rectangle rouge</option> 
      <option value="circle">Circle vert</option> 
      <option value="rectb">Resctangle Blue</option> 
    </select> 
    <label> chousir colour </label> 
    <select onchange="select()" id="selectcolour"> 
      <option value="rouge" >Rouge</option> 
      <option value="vert">Vert</option> 
      <option value="blue">Blue</option> 
      <option value="noir">Noir</option> 
    </select> 
     <button onclick="setColor();">Generate</button> 

и Javascript

функция выбора() {

   var selected = document.getElementById("selectobject").value; 

       var selectedcolour = document.getElementById("selectcolour").value; 

       if (selected == "rect" && selectedcolour == "rouge"){ 
        alert("rectangle rouge"); 

         //function setColor(){ 
          document.getElementById("cercle1").style.fill = blue; 
         //} 

        } 

}

и при выборе опции я не могу изменить, например, цвет.

благодарит за вашу помощь.

Answer 1

Добавить кавычки в "синий", как это:

document.getElementById ("cercle1") style.fill = "синий";.

Это будет работать:

function select(){ 

       var selected = document.getElementById("selectobject").value; 

       var selectedcolour = document.getElementById("selectcolour").value; 

       if (selected == "rect" && selectedcolour == "rouge"){ 
        alert("rectangle rouge"); 


         setColor("blue"); 

        } 
} 

function setColor(color){ 
          document.getElementById("cercle1").style.fill = color; 
         }