如何顯示顯示：無DIV使用Javascript

Question

我有一個顯示設置為無的DIV，通過使用javascript我嘗試通過使用按鈕的onclick顯示它。 但恰恰相反，會發生什么。 我的DIV已經顯示，當我點擊按鈕時，它隱藏了DIV。 我在這做錯了什么，請幫忙！

這是我的按鈕和div：

<button onclick="myFunction()">SHOW</button>
    <div id="how_to_form">
      <img src="../images/view.png">
    </div>

這是JS代碼：

function myFunction() {
     var x = document.getElementById("how_to_form").style.display = 'none';
     if (x.style.display === "none") {
      x.style.display = "block";
    } else {
      x.style.display = "none";
    }
  }

Answer 1

你有沒有檢查過你的div是否已經設置了默認樣式？ 您必須將div的默認樣式設置為顯示：無內聯

<div id="how_to_form" style="display:none">

或者通過CSS

<style>
    #how_to_form{ display:none }
</style>

Answer 2

你的線路有雙重任務：

var x = document.getElementById("how_to_form").style.display = 'none';

它首先將display分配給none：

document.getElementById("how_to_form").style.display = 'none';

然后獲取該表達式的結果（這是您指定的字符串），並將其分配給x ：

var x = 'none';

這不是你想要的。 首先聲明元素的變量，然后分配它的樣式。

此外，聽起來您希望元素開始隱藏 - 在函數外部分配其初始樣式：

const form = document.getElementById("how_to_form");
form.style.display = 'none';
function myFunction() {
  if (form.style.display === "none") {
    form.style.display = "block";
  } else {
    form.style.display = "none";
  }
}

或者，更簡潔，使用條件運算符：

function myFunction() {
  form.style.display = form.style.display === "none"
  ? 'block'
  : 'none';
}

還要考慮使用Javascript正確附加處理程序，而不是使用內聯HTML屬性，這些屬性通常被認為是非常糟糕的做法，並且可能難以管理：

document.querySelector('button').addEventListener('click', myFunction);

Answer 3

問題是你的變量賦值

鏈接賦值運算符是可能的，以便為多個變量分配單個值。

請參閱此鏈接以獲取變量分配選項https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators

var x = y = 10

然后x和y值都是10

同樣在你的代碼中var x是none

要達到預期效果，請使用以下選項
1.為html_to_form設置CSS以顯示：none 2.在您的代碼中更改變量x賦值給var x = document.getElementById（“html_to_form”）