Search code examples
javascripthtmlhead

Embed JavaScript in Head, call from Body

I want to insert the following function into 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>

those function will generate a 'spoiler-like' into my blogpost. I want to call those function in body like

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

but then it shows enter image description here

What I want is input-title and Buka button only.

How do I make this work ?

Update:

Here is my current full page code

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

  • Is this what you want?

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