Javascriptdocument.getElementById('').style.display="block"不作業

我正在處理網站的這一部分，但我無法理解在檢查無線電輸入時我在更改影像顯示樣式方面失敗的地方......我已經閱讀了所有其他答案，但無法獲得它作業。正如您在代碼段中看到的，這兩個影像（來自網路的隨機影像）一直在顯示。感謝您的幫助

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 300;
  background-color: #000;
  color: #eaeaea;
}

h1 {
  font-size: 3rem;
  font-weight: 600;
  color: #fff;
}

h2 {
  font-size: 2.5rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  font-weight: 600;
  color: #fff;
}

h3 {
  font-size: 2rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  font-weight: 600;
  color: #fff;
}

p {
  font-size: 1.5rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  font-weight: 300;
}

.tipologie-di-ispezione {
  grid-row: 5/6;
  margin-left: 15vw;
  margin-right: 15vw;
  margin-bottom: 10vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.tipologie-di-ispezione h3{
  font-size: 5vh;
  margin-bottom: 7vh;
}

.ispezione-left {
  grid-column: 1/2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 55vh;
}

.ispezione-right {
  grid-column: 2/3;
  background-image: -webkit-linear-gradient(left, #343434, #212121);
  background-image: -o-linear-gradient(left, #343434, #212121);
  background-image: linear-gradient(to right, #343434, #212121);
  border-radius: 10px;
  margin-left: -20vw;
  height: 55vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ispezione-right img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.tipologie-ispezione {
  margin: 5vh 0vh 5vh 0vh;
}

.tipologie-ispezione label {
  background-image: -webkit-linear-gradient(left, #343434, #212121);
  background-image: -o-linear-gradient(left, #343434, #212121);
  background-image: linear-gradient(to right, #343434, #212121);
  border-radius: 10px;
  padding: 1vw 4vw 1vw 4vw;
  color: #fff;
  font-size: 2.5vh;
  margin-left: 0vh;
}

<!-- Esempi di Ispezione -->
<div class="tipologie-di-ispezione">
  <h3>TIPOLOGIE DI ISPEZIONE</h3>
<div class="ispezione-left">
    <div class="tipologie-ispezione">
      <label for="ispezione1">ISPEZIONE 1
        <input onChange='sezioneispezione()' type="radio" id="ispezione1" name="ispezioni" value="1" checked>
      </label>
    </div>
    <div class="tipologie-ispezione">
      <label for="ispezione2">ISPEZIONE 2
        <input onChange='sezioneispezione()' type="radio" id="ispezione2" name="ispezioni" value="2">
      </label>
    </div>

</div>
<div class="ispezione-right">
  <img id="ispezione1img" src="https://media.istockphoto.com/vectors/fire-inspection-abstract-concept-vector-illustration-vector-id1287434990?k=20&m=1287434990&s=612x612&w=0&h=ThAnvYANbUq-_7BHG0dvauBdot_CaR_TIsUOfRqA690=" alt="ispezione1.png" >
  <img id="ispezione2img" src="https://img.freepik.com/free-vector/qa-tester-developmental-kit-analyzing-binary-code-close-inspection-coding-checking-open-script-website-administration-reaffirming-quality-isolated-concept-metaphor-illustration_335657-1196.jpg?size=338&ext=jpg" alt="ispezione2.png" >
</div>
<script type="text/javascript">
function sezioneispezione() {
  if(document.getElementById('ispezione1').checked) {
    document.getElementById('ispezione2img').style = document.getElementById('ispezione2img').style   "; display: none";
    document.getElementById('ispezione1img').style = document.getElementById('ispezione1img').style   "; display: block";
  }
  else if(document.getElementById('ispezione2').checked) {
    document.getElementById('ispezione1img').style = document.getElementById('ispezione1img').style   "; display: none";
    document.getElementById('ispezione2img').style = document.getElementById('ispezione2img').style   "; display: block";
  }
  else {
    document.getElementById('ispezione1img').style = document.getElementById('ispezione1img').style   "; display: none";
    document.getElementById('ispezione2img').style = document.getElementById('ispezione2img').style   "; display: none";
  }
};

sezioneispezione();
</script>

uj5u.com熱心網友回復：

輸入缺少 onChange 事件。當輸入的選中狀態發生變化時，您必須呼叫函式。

HTML

`

<input onChange='sezioneispezione()' type="radio" id="ispezione1" name="ispezioni" value="1" checked>
<input onChange='sezioneispezione()' type="radio" id="ispezione2" name="ispezioni" value="2">

`

uj5u.com熱心網友回復：

您沒有正確設定樣式值。您需要設定整個樣式值，而不是一個樣式元素。嘗試使用document.getElementById('ispezione2img').style = "display: block". 如果您需要保留以前的樣式更改，請嘗試document.getElementById('ispezione2img').style = document.getElementById('ispezione2img').style "; display: block".

編輯：正如@Json Derulo 所說，您永遠不會呼叫設定樣式的函式，也許我的方法不是必需的

標籤：javascript html css

上一篇：我如何使用“querySelectorAll”？

下一篇：ECMAScript中的“標準物件”和“普通物件”有什么區別？