我的 JS 函数在按下 OnClick 按钮后显示 HTML 块是错误的

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();' 函数工作正常，但为了以防万一，我也会 post 它在这里。

<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>

对于我在此处 post 编辑的代码量，我深表歉意，我希望这个问题是可以理解的，希望你们能提供帮助！非常感谢:)

Answer 1

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

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

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

到

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

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

我的 JS 函数在按下 OnClick 按钮后显示 HTML 块是错误的

My JS Function that displays a block of HTML after pressing an OnClick button is buggy

html

javascript

function

button