打印<script>的内容而不是执行

Question

基本上，我想知道是什么原因导致打印＆lt; script＆gt; 标记的内容而不是用HTML执行。

＆＃xA;＆＃xA;

背景：我有手风琴按钮，我想要做的是将按钮中的图像从向下箭头更改为点击向上箭头。我正在使用此处描述的部分代码。＆＃xA;如果我把我的代码放在小提琴，就像这个（我用alts替换img以避免本地文件问题），它的工作原理。

＆＃xA;＆＃xA;

但是，在我的代码中，如果我把脚本放在按钮之前，没有任何反应，如果我把它放在它之后，那么当我点击按钮时脚本位于按钮下面（如果它只是var a = null，那么它将打印var a = null）。

＆＃xA;＆＃xA;

 ＆lt; button class =“accordion”id =“button_emotion”＆gt; VIEWS＆lt; img id =“button_emotion_img”src =“images / arrow_grey.svg”width =“30”height =“30”alt =“”style =“float：right ;保证金：0 0px 0 0px;“ /＆GT;＆LT; /按钮＆GT;＆＃XA;＆LT;脚本＆GT;＆＃XA; document.getElementById（'button_emotion'）。onclick = function（）{＆＃xA; document.getElementById（'button_emotion_img'）。src =“images / arrow_grey_up.svg”;＆＃xA; } &&&xA;＆lt; / script＆gt;＆＃xA;  

＆＃xA;＆＃xA;

我也尝试过使用 onClick =“myFunction（）”<具有相同结果的按钮标记中的/ code>。

＆＃xA;＆＃xA;

＆＃xA;＆＃xA ;

造成这种情况的原因是什么？

＆＃xA;＆＃xA;

更新：

＆＃xA;＆＃xA;

我找到了罪魁祸首。稍后在代码中，有类似的东西：

＆＃xA;＆＃xA;

 ＆lt; script＆gt;＆＃xA; var acc = document.getElementsByClassName（“accordion”）;＆＃xA; var i;＆＃xA;＆＃xA; for（i = 0; i＆lt; acc.length; i ++）{＆＃xA; acc [i] .onclick = function（）{＆＃xA; this.classList.toggle（ “活性”）;＆＃XA; this.nextElementSibling.classList.toggle（ “节目”）;＆＃XA; }＆＃XA; }＆＃xA;＆lt; / script＆gt;＆＃xA;  

＆＃xA;＆＃xA;

由于我没有编写此代码，我不确定它的作用，但是它显示了非“手风琴”类的下一个标签。有一个修改过的引导程序可以打印内容，但没有它，它只是不执行脚本，但也不打印它。

＆＃xA;＆＃xA;

这里是使用额外代码更新了JSFiddle 。如果您将图像更改部分放在脚本之前或HTML部件中的＆lt; script＆gt; 中，它就不会执行它（并且修改后的css会将其打印出来），但是如果你放在它之前，代码将执行。

＆＃xA;

Answer 1

设置display标签的<script> CSS属性可能导致其内容被打印。对我来说就是这种情况。