Изменить цвет элемента с выпадающим

Question

Я хочу изменить svg с помощью выпадающего меню с javascript.

Мой javascript работает нормально, когда я хочу изменить элемент абзаца.Затем он очищает старый класс и выдает новый, основанный на опции выпадающего текста.

Но когда я использую его для изменения изображения SVG, он работает в любое время.Это дает новый класс для элемента svg.Но стирание из старого класса не работает, а затем оно ломается.

var selectElem = document.getElementById('select')
var pElem = document.getElementById('p')

// When a new <option> is selected
selectElem.addEventListener('change', function() { 
  
  //get value text
  var colorValue= document.getElementById('select').options[document.getElementById('select').selectedIndex].text;
  
  pElem.className = '';
  
  // Add that class to the <p>
  pElem.classList.add(colorValue);
}) 

.grün {color: green;}
.gelb {color: yellow;}
.blau {color: blue;}
.rot {color: red;}
.pink {color: pink;}

svg {width: 20%;
    height: 20%;}

<p id="p">Element</p>
<select id="select">
  <option selected>grün</option>
  <option>gelb</option>
  <option>blau</option>
  <option>rot</option>
  <option>pink</option>
</select>

Здесь SVG изменяет код:

var selectElem = document.getElementById('select')
var pElem = document.getElementById('one')

// When a new <option> is selected
selectElem.addEventListener('change', function() { 
  
  //get value text
  var colorValue= document.getElementById('select').options[document.getElementById('select').selectedIndex].text;
  
  pElem.className = '';
  
  // Add that class to the <p>
  pElem.classList.add(colorValue);
}) 

.weiss {fill: white;}
.grün {fill: green;}
.gelb {fill: yellow;}
.blau {fill: blue;}
.rot {fill: red;}
.pink {fill: pink;}

<svg id="one" width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" />
</svg>

<p id="p">Element</p>
<select id="select">
  <option selected>grün</option>
  <option>gelb</option>
  <option>blau</option>
  <option>rot</option>
  <option>pink</option>
</select>

Answer 1

Вам нужно изменить pElem.className = '' на pElem.classList = ''.

var selectElem = document.getElementById('select')
var pElem = document.getElementById('one')

// When a new <option> is selected
selectElem.addEventListener('change', function() { 
  
  //get value text
  var colorValue= document.getElementById('select').options[document.getElementById('select').selectedIndex].text;
  
  pElem.classList = '';
  
  // Add that class to the <p>
  pElem.classList.add(colorValue);
}) 

.weiss {fill: white;}
.grün {fill: green;}
.gelb {fill: yellow;}
.blau {fill: blue;}
.rot {fill: red;}
.pink {fill: pink;}

<svg id="one" width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" />
</svg>

<p id="p">Element</p>
<select id="select">
  <option selected>grün</option>
  <option>gelb</option>
  <option>blau</option>
  <option>rot</option>
  <option>pink</option>
</select>

Это должно решить вашу проблему.

Ссылки: className docs , classList docs

Связанные теги: css , html , classname