Display Result of Javascript & HTML in Blogger Post

问题

This is the javascript & html code i have.

function convertinput() {
    document.getElementById('first').value
    var string = document.getElementById('first').value
    var newString = "@@[0:1: " + string + "]]"
    document.getElementById('output').value = newString
}

<input id="first"></input>
<br>
<input id="output"></input>
<br>
<input type='button' onclick='convertinput()' value='convert'>

the code editor in jsfiddle is http://jsfiddle.net/FEC7S/3/

I want this code to be displayed in my blog post as it is here http://www.trickiezone.com/2012/10/facebook-blue-text-generator-by.html

If i embed it in my blog through jsfiddle or tinkerbin, the whole web page is getting displayed. I need only the result to be displayed in my blog post.
How to do so ?

回答1:

i have added the working demo in my blog:

signed by miliodiguine

TO DO:

1)Login to your blog.

2)Add New Post

3)paste this code

<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<script language="javascript" type="text/javascript">
function convertinput() {
    document.getElementById('first').value
    var string = document.getElementById('first').value
    var newString = "@@[0:1: " + string + "]]"
    document.getElementById('output').value = newString
}
</script>

<input id="first"></input>
<br>
 <input id="output"></input>
<br>
<input type='button' onclick='convertinput()' value='convert'>
</div>

回答2:

You could use your id to set the display property in css...

function convertinput() {
    document.getElementById('output').value = "@@[0:1: " + document.getElementById('first').value + "]]";
   document.getElementById('output').style.display = 'block';
}



<input id="first"></input>
<br>
<input id="output" style="display:none;"></input>
<br>
<input type='button' onclick='convertinput()' value='convert'>

http://jsfiddle.net/FEC7S/7/

来源：https://stackoverflow.com/questions/13122245/display-result-of-javascript-html-in-blogger-post

标签

javascript

html

blogger