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

Question

我想在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>

这些函数会在我的博文中生成 'spoiler-like'。我想在 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>

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

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

Embed JavaScript in Head, call from Body

html

javascript

head