在 Head 中嵌入 JavaScript，从 Body 调用答案

【问题标题】：Embed JavaScript in Head, call from Body在 Head 中嵌入 JavaScript，从 Body 调用
【发布时间】：2016-07-04 05:22:11
【问题描述】：

我想在head中插入如下函数

<script='javascript'>                           
                function inputSpoiler(input-title,input-text)
                {
                    <div style="margin: 5px 20px 20px;">
                    <div class="smallfont" style="margin-bottom: 2px;">
                    <b>input-title</b>: <input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" style="font-size: 12px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Buka" /> </div>
                    <div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
                    <div style="display: none;">
                    input-text
                    <img border="0" /></div>
                    </div>
                    </div>              
                }

    </script>

这些函数会在我的博文中生成一个“类似剧透”的内容。我想在body 中调用这些函数，比如

<script>
document.getElementById("output-spoiler").innerHTML =inputSpoiler('i-input-some-title','i-input-some-text');
</script>

但随后它显示

我想要的只是input-title 和Buka 按钮。

我该如何进行这项工作？

更新：

这是我当前的完整页面代码

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
    <script='javascript'>                           
                function inputSpoiler(input-title,input-text)
                {
                    <div style="margin: 5px 20px 20px;">
                    <div class="smallfont" style="margin-bottom: 2px;">
                    <b>input-title</b>: <input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" style="font-size: 12px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Buka" /> </div>
                    <div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
                    <div style="display: none;">
                    input-text
                    <img border="0" /></div>
                    </div>
                    </div>              
                }

    </script>
</head>

<body>
The content of the document......
<div id='output-spoiler'>
</spoiler>
<script>
document.getElementById("output-spoiler").innerHTML =inputSpoiler('i-input-some-title','i-input-some-text');
</script>
</body>
</html>

【问题讨论】：

请尝试通过 html 验证器运行此页面，并通过 javscript linter 运行脚本。您的脚本因多种原因无效，包括脚本标签本身
你在 inputSpoiler 函数中有很多错误。尝试正确连接字符串
我强烈建议在尝试之前学习 javascript。你的代码完全是错误的。
@charlietfl 所以...太宽泛了？
嘿兄弟，belajar lebih dalem lagi.. sintax loe ngaco banget.. html gak bisa ditaro didalem JS。除了将其转换为字符串..

标签： javascript html head

【解决方案1】：

这是你想要的吗？

    <!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>

</head>

<body>
    <script >                           
                function inputSpoiler(inputTitle,inputText)
                {
                    var spText = '<div style="margin: 5px 20px 20px;">\n';
                    spText += '<div class="smallfont" style="margin-bottom: 2px;">\n';
                    spText += '<b>' + inputTitle +'</b>: <input onclick="if (this.parentNode.parentNode.getElementsByTagName(\'div\')[1].getElementsByTagName(\'div\')[0].style.display != \'\') { this.parentNode.parentNode.getElementsByTagName(\'div\')[1].getElementsByTagName(\'div\')[0].style.display = \'\'; this.innerText = \'\'; this.value = \'Tutup\'; } else { this.parentNode.parentNode.getElementsByTagName(\'div\')[1].getElementsByTagName(\'div\')[0].style.display = \'none\'; this.innerText = \'\'; this.value = \'Buka\'; }" style="font-size: 12px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Buka" /> </div>\n';
                    spText += '<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">\n <div style="display: none;">\n' ;
                    spText += inputText;
                    spText += '<img border="0" /></div>\n </div>\n  </div> \n';

                    return spText;
                }

    </script>
The content of the document......
<div id='output-spoiler'>
</div>
<script>
document.getElementById("output-spoiler").innerHTML =inputSpoiler('i-input-some-title','i-input-some-text');
</script>
</body>
</html>

【讨论】：

我已经在 Blogger 中将脚本放在 </head> 之前，并在创建帖子时尝试调用 <div id='output-spoiler'> </div> <script> document.getElementById("output-spoiler").innerHTML =inputSpoiler('i-input-some-title','i-input-some-text'); </script>，但后来。他们没有出现。你知道为什么会这样吗？