Как переключить SVG круг с помощью JavaScript

Question

У меня проблема с моим кодом JavaScript.

Я хочу показать и скрыть два SVG-круга, когда нажимаю кнопку.

Кажется, у меня нет ошибок при проверке консоли, но кнопка не работает ...

Это код кнопки, и я установилидентификатор кнопки как «strike_btn», а идентификатор кружка SVG как «strike»

код:

onload = function() {
  function changeStr() {
    var strike = document.getElementById('strike');
    if (strike.style.display === 'block') {
      strike.style.display = "none";
    }
  }
  var strbutton = document.getElementById('strike_btn');
  strbutton.addEventListener('click', changeStr);
}

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-7 col-md-7 col-sm-12 col-xs-12">
      <button type="button" class="btn btn-link" id="strike_btn">Strike</button>
    </div>
    <div class="col-lg-5 col-md-5 col-sm-8 col-xs-8">
    </div>
  </div>
</div>
<div class="container-fluid">
  <div class="row">
    <div class="col-lg-7 col-md-7 col-sm-12 col-xs-12" id="abc">
      <svg width="100%" height="100%" viewBox="0 0 600 780">
        <rect width="100%" height="100%" style="fill: white; stroke-width: 3; stroke: black"></rect>
        <rect x="21.5%" y="24.03846154%" width="56.6666667%" height="51.92307692%" style="fill: white; stroke-width: 2; stroke: black"></rect>
        <circle cx="-26.383257142857147%" cy="75.28764912669683%" r="4" fill="#1C6FA6"></circle>
        <circle cx="-28.12094285714285%" cy="52.508967516968326%" id ="strike" r="4" fill="#1C6FA6"></circle>
      </svg>
    </div>
  </div>
</div>

Answer 1

Вам нужно добавить атрибут style с блоком style="display: block;", чтобы это работало (изменили координаты x для фрагмента, потому что круги вышли за границы окна)

window.onload = function() {
  function changeStr() {
    var strike = document.getElementById('strike');
    if (strike.style.display === 'block') {
      strike.style.display = "none";
    }
  }
  var strbutton = document.getElementById('strike_btn');
  strbutton.addEventListener('click', changeStr);
};

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-7 col-md-7 col-sm-12 col-xs-12">
      <button type="button" class="btn btn-link" id="strike_btn">Strike</button>
    </div>
    <div class="col-lg-5 col-md-5 col-sm-8 col-xs-8">
    </div>
  </div>
</div>
<div class="container-fluid">
  <div class="row">
    <div class="col-lg-7 col-md-7 col-sm-12 col-xs-12" id="abc">
      <svg width="100%" height="100%" viewBox="0 0 600 780">
        <rect width="100%" height="100%" style="fill: white; stroke-width: 3; stroke: black"></rect>
        <rect x="21.5%" y="24.03846154%" width="56.6666667%" height="51.92307692%" style="fill: white; stroke-width: 2; stroke: black"></rect>
        <circle cx="26.383257142857147%" cy="75.28764912669683%" r="4" fill="#1C6FA6"></circle>
        <circle cx="28.12094285714285%" cy="52.508967516968326%" id ="strike" r="4" fill="#1C6FA6" style="display: block;"></circle>
      </svg>
    </div>
  </div>
</div>

Answer 2

Во-первых, на холсте круги вообще не были видны.

Во-вторых, начальное значение НЕ устанавливается, если вы его не установите

var strike1, strike2;
function changeStr() {
  strike1.style.display = strike1.style.display === "none"?"block":"none";
  strike2.style.display = strike2.style.display === "none"?"block":"none";
}

window.addEventListener("load",function() {
  strike1 = document.getElementById('strike1');
  strike2 = document.getElementById('strike2');
  strike1.style.display = "none";
  strike2.style.display = "none";
  document.getElementById('strike_btn').addEventListener('click', changeStr);
})  

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-7 col-md-7 col-sm-12 col-xs-12">
      <button type="button" class="btn btn-link" id="strike_btn">Strike</button>
    </div>
    <div class="col-lg-5 col-md-5 col-sm-8 col-xs-8">
    </div>
  </div>
</div>
<div class="container-fluid">
  <div class="row">
    <div class="col-lg-7 col-md-7 col-sm-12 col-xs-12" id="abc">
      <svg width="200" height="200" viewBox="0 0 200 180">
        <rect width="100%" height="100%" style="fill: white; stroke-width: 3; stroke: black"></rect>
        <rect x="21.5%" y="24.03846154%" width="56.6666667%" height="51.92307692%" style="fill: white; stroke-width: 2; stroke: black"></rect>
        <circle cx="26.383257142857147%" cy="75.28764912669683%" id ="strike1" r="4" fill="#1C6FA6"></circle>
        <circle cx="28.12094285714285%" cy="52.508967516968326%" id ="strike2" r="4" fill="#1C6FA6"></circle>
      </svg>
    </div>
  </div>
</div>

Answer 3

Может быть, вам нужно добавить второе условие

if (strike.style.display === 'none') {
    strike.style.display = "block";  
}

или просто так:

if (strike.style.display === 'block') {
    strike.style.display = "none";
} else {
    strike.style.display = "block";
}

Answer 4

Свойство отображения удара, вероятно, не является "блоком". Проверьте, что вычисленное свойство отображения находится в инструментах разработки, или измените эту строку на:

if (strike.style.display !== 'none') {