javascript - 使用 Javascript 显示/隐藏 div 元素不起作用

Question

我尝试使用 hide 和 style.display 以及元素 id 来切换 div 元素的可见性，但它不起作用。

我的目标是，当您按下第一个按钮时，div 会隐藏并显示另一个 div。当按下第二个 div 时反之亦然。

我正在使用事件监听器。我编码的方式有问题吗？我意识到我没有调用第二个按钮，但我正在尝试使用第一个按钮进行测试。

谢谢!

var buttonOne = document.querySelector("#madLibCreation");

buttonOne.addEventListener("submit", getValues);

function getValues(e) {
  var firstFruit = document.getElementById("fruitOne");
  var firstNoun = document.getElementById("nounOne");
  var firstName = document.getElementById("nameOne");
  var firstAdjective = document.getElementById("adjectiveOne");
  var firstColor = document.getElementById("colorOne");
  var secondAdjective = document.getElementById("adjectiveTwo");
  var thirdAdjective = document.getElementById("adjectiveThree");
  var secondNoun = document.getElementById("nounTwo");
  var firstVerb = document.getElementById("verbOne");
  var secondVerb = document.getElementById("verbTwo");
  var thirdNoun = document.getElementById("nounThree");
  var thirdVerb = document.getElementById("verbThree");
  var firstAnimal = document.getElementById("animalOne");

  document.getElementById("madLibValues").hidden = true;
  document.getElementById("madLibResults").hidden = false;

}

#madLibValues,
#madLibResults {
  position: absolute;
}

#madLibResults {
  display: none;
}

<div id="container">
  <div id="madLibValues">
    <form id="madLibs">
      <label for="fruitOne">Fruit</label><input type="text" id="fruitOne">
      <label for="nounOne">Noun</label><input type="text" id="nounOne">
      <label for="adjectiveOne">Adjective</label><input type="text" id="adjectiveOne">
      <label for="colorOne">Color</label><input type="text" id="colorOne">
      <label for="adjectiveTwo">Adjective</label><input type="text" id="adjectiveTwo">
      <label for="adjectiveThree">Adjective</label><input type="text" id="adjectiveThree">
      <label for="nounTwo">Noun</label><input type="text" id="nounTwo">
      <label for="verbOne">Verb</label><input type="text" id="verbOne">
      <label for="verbTwo">Verb</label><input type="text" id="verbTwo">
      <label for="nounThree">Noun</label><input type="text" id="nounThree">
      <label for="verbThree">Verb</label><input type="text" id="verbThree">
      <label for="animalOne">Animal</label><input type="text" id="animalOne">
      <input type="submit" id="getMadLibCreation" name="Get Mad Lib Creation">
    </form>
  </div>
  <div id="madLibResults">
    <p id="madLibsCreation">
      Hi
    </p>
    <button id="goBackToMadLibs">
                    Go Back To Mad Libs
                </button>
  </div>
</div>

Answer 1

这里有一些事情需要改变；首先，内联元素样式是通过 style 完成的属性，而不是直接在元素本身上:

/* Apply inline styling via the style object */
document.getElementById("madLibValues").style = /*...*/;

此外，您可以考虑通过 display 切换元素的可见性规则:

/* Obtain the elements for each dialog */
let valuesElement = document.getElementById("madLibValues");
let resultsElement = document.getElementById("madLibResults");

/* A css display value of none prevents madLibValues display */
valuesElement.style.display = "none";

/* Unset the css display value to restore default element display behavior */
valuesElement.style.display = "unset";

还需要进行一些其他更改，这些更改在下面的代码片段中进行了总结 - 希望有所帮助!

function getValues(e) {
  
  /* Stop form from submitting */
  e.preventDefault();

  var firstFruit = document.getElementById("fruitOne");
  var firstNoun = document.getElementById("nounOne");
  var firstName = document.getElementById("nameOne");
  var firstAdjective = document.getElementById("adjectiveOne");
  var firstColor = document.getElementById("colorOne");
  var secondAdjective = document.getElementById("adjectiveTwo");
  var thirdAdjective = document.getElementById("adjectiveThree");
  var secondNoun = document.getElementById("nounTwo");
  var firstVerb = document.getElementById("verbOne");
  var secondVerb = document.getElementById("verbTwo");
  var thirdNoun = document.getElementById("nounThree");
  var thirdVerb = document.getElementById("verbThree");
  var firstAnimal = document.getElementById("animalOne");

  /* Updated code */
  let valuesElement = document.getElementById("madLibValues");
  let resultsElement = document.getElementById("madLibResults");

  valuesElement.style.display = "none";
  resultsElement.style.display = "unset";
}

/* Updated selector to match getMadLibCreation id */
var buttonOne = document.querySelector("#getMadLibCreation");

/* Replace submit with click to catch user interaction with button */
buttonOne.addEventListener("click", getValues);

#madLibValues, #madLibResults {
    position: absolute;
}

#madLibResults {
    display: none;
}

<div id="container">
  <div id="madLibValues">
    <form id="madLibs">
      <label for="fruitOne">Fruit</label><input type="text" id="fruitOne">
      <label for="nounOne">Noun</label><input type="text" id="nounOne">
      <label for="adjectiveOne">Adjective</label><input type="text" id="adjectiveOne">
      <label for="colorOne">Color</label><input type="text" id="colorOne">
      <label for="adjectiveTwo">Adjective</label><input type="text" id="adjectiveTwo">
      <label for="adjectiveThree">Adjective</label><input type="text" id="adjectiveThree">
      <label for="nounTwo">Noun</label><input type="text" id="nounTwo">
      <label for="verbOne">Verb</label><input type="text" id="verbOne">
      <label for="verbTwo">Verb</label><input type="text" id="verbTwo">
      <label for="nounThree">Noun</label><input type="text" id="nounThree">
      <label for="verbThree">Verb</label><input type="text" id="verbThree">
      <label for="animalOne">Animal</label><input type="text" id="animalOne">
      <input type="submit" id="getMadLibCreation" name="Get Mad Lib Creation">
    </form>
  </div>
  <div id="madLibResults">
    <p id="madLibsCreation">
      Hi
    </p>
    <button id="goBackToMadLibs">
                Go Back To Mad Libs
            </button>
  </div>
</div>