Javascript <；脚本>；打印而不是执行

基本上，我想知道是什么导致

标记的内容被打印出来而不是在HTML中执行

上下文：我有手风琴按钮，我想做的是改变按钮中的图像从向下箭头到向上箭头点击。我正在使用描述的部分代码。 如果我把我的代码放在一个文件夹中（我用alts替换img以避免本地文件问题），它就可以工作了

然而，在我的代码中，如果我将脚本放在按钮之前，什么也不会发生，如果我将脚本放在按钮之后，那么当我单击它时，脚本的内容将显示在按钮下方（如果它只是var a=null，那么它将打印var a=null）

我不确定它到底做了什么，因为我没有写这段代码，但它显示了下一个非“accordion”类的标记。有一个修改过的引导程序可以打印内容，但是如果没有它，它不会执行脚本，也不会打印

---

下面是带有额外代码的示例。如果将图像更改部分放在脚本之前或HTML部分中的

中，它不会执行它（使用修改后的css将打印它），但如果将其放在脚本之前，代码将执行。

设置

显示
标记的css属性可能会导致打印其内容。我就是这样。
在哪个浏览器中会发生这种情况？这是我见过的最奇怪的事情——如果你能在实际发生的地方制作一个提琴，那就太好了——例如，在提琴中移动你的代码，就像不显示脚本内容一样——你能分享可执行的演示/代码片段吗@JamesDonnelly不，它不是，该/>部分属于按钮中包含的标记。@MorganFR oops，完全错过了
img
。我已经删除了我的评论。与其在html中乱扔javascript，不如听听窗口的
load
事件。收到dom后，所有dom都已被解析并存在—准备好进行交互。将代码放在按钮之前意味着代码试图在按钮存在之前运行。例如
window.addEventListener（'load'，onDocLoaded）；函数onDocLoaded（evt）{//在这里完成所有初始化工作}
<button class="accordion" id="button_emotion">VIEWS<img id="button_emotion_img" src="images/arrow_grey.svg" width="30" height="30" alt="" style="float:right;margin:0 0px 0 0px;" /></button>
<script>
    document.getElementById('button_emotion').onclick=function () {
                document.getElementById('button_emotion_img').src = "images/arrow_grey_up.svg";
    };
</script>

<script>
        var acc = document.getElementsByClassName("accordion");
        var i;

        for (i = 0; i < acc.length; i++) {
                acc[i].onclick = function(){
                        this.classList.toggle("active");
                        this.nextElementSibling.classList.toggle("show");
                }
        }
</script>