按下 OnClick 按钮后显示 HTML 块的我的 JS 函数有问题

Question

我有一个与按钮配合使用的 JS 函数；基本上，它应该在单击按钮后显示 HTML 代码。但是，由于某种原因，当我加载页面时，在单击按钮之前 HTML 是可见的；单击该按钮一次会使代码消失，然后再次单击该按钮会使代码重新出现。似乎该功能与我想要它做的相反，但我不知道它为什么这样做：将我的代码与执行我想要它做的其他代码进行比较，我没有看到任何明显的差异.

这是脚本：

<script>
        function showTweet() {
          var x = document.getElementById("tw-block-parent");

          if (x.style.display === "none") {
            x.style.display = "block";
          } else {
            x.style.display = "none";
          }
        }
        </script>

这是脚本应该显示的 HTML：

<div id="tw-block-parent">
        <div class="timeline-TweetList-tweet">
            <div class="timeline-Tweet">
                <div class="timeline-Tweet-brand">
                    <div class="Icon Icon--twitter"></div>
                </div>
                <div class="timeline-Tweet-author">
                    <div class="TweetAuthor"><a class="TweetAuthor-link" href="#channel"> </a><span class="TweetAuthor-avatar">
                        <div class="Avatar"> </div></span><span class="TweetAuthor-name">TwitterDev</span><span class="Icon Icon--verified"> </span><span class="TweetAuthor-screenName">@TwitterDev</span></div>
                    </div>
                    <!--This is where the tweet text goes-->
                    <div id="timeline-Tweet-text_1"></div>
                    <div class="timeline-Tweet-metadata"><span class="timeline-Tweet-timestamp">9h</span></div>
                    <ul class="timeline-Tweet-actions">
                        <li class="timeline-Tweet-action"><a class="Icon Icon--heart" href="#"></a></li>
                        <li class="timeline-Tweet-action"><a class="Icon Icon--share" href="#"></a></li>
                    </ul>
                </div>
            </div>
        </div>

最后是 HTML 按钮：

<input type="submit" onclick="onClick(); showTweet();" id="submit-button" class="instructions" value="try me!">

'OnClick();'据我所知，函数工作正常，但以防万一我也会在这里发布。

<script>
    //This function allows different inputs to display different text blocks
            function onClick() {
                if (document.getElementById("user_input").value === "I hate the EU!")
                {
                    antiEuropeExample();
                }
                else if (document.getElementById("user_input").value === "I hate traffic!")
                {
                        antiTrafficExample();
                }
                else if (document.getElementById("user_input").value === "I hate Trump!")
            {
                antiTrumpExample();
            }
                else if (document.getElementById("user_input").value === "I hate Facebook!")
                {
                        antiFacebookExample();
                }
                else
                {
                    alert("Wrong input buddy!");
                }
            }

      </script>

对于我在这里发布的大量代码，我深表歉意，我希望这个问题是可以理解的，并且你们可以提供帮助！非常感谢:)

Answer 1

所有<div> 元素都有默认样式display:block;，如果您想更改特定元素的初始行为，您必须为其添加样式。

在你的情况下，我建议改变这个：

<div id="tw-block-parent">

到

<div id="tw-block-parent" style="display:none;">

这会使 div 在开始时不可见。