How to document.write( ) on a click of a button

Question

I want to show QR code onclick or onmousehover over a button "Show QR Code".

I also want to insure that the javascript of http://www.qrsrc.com which generate and display the QR code Renders/Shows QR code only when "Show QR Code" button is clicked or hovered over with mouse.

Below is the script i used for that but it does not work. can anyone tell me what is wrong with this script.

This is a encoded script for Blogger:-

<button onclick="function () {
document.write(&quot;&lt;script src=\&quot;http://www.qrsrc.com/qrcode.js?url=http://search.google.androidappania.com/?q=<data:post.title/>&amp;id=<data:post.id/>\&quot; id='qrsrc' &gt; &lt;\/script&gt;&quot;);}&quot;&gt;Show QR Code&lt;/button&gt;

This is a converted script after page go live:-

<button onclick="function () {
document.write("<script src=\"http://www.qrsrc.com/qrcode.js?url=http://search.google.androidappania.com/?q=Download WebMD Full Apk for Android&id=3384228222355572267\" id='qrsrc' > <\/script>");}">Show QR Code</button>

Answer 1

If you're trying to display a qr code as image:

<button onclick="
var height=100;
var width=100;
var urltoencode = 'http://search.google.androidappania.com/?q=Download WebMD Full Apk for Android';
document.getElementById('qr').src='https://chart.googleapis.com/chart?cht=qr&chs='+width+'x'+height+'&chl='+escape(urltoencode);"
>Show QR Code</button>
<img id="qr">

JSFiddle

or the same with jQuery:

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<button onclick="
var height=100;
var width=100;
var urltoencode = 'http://search.google.androidappania.com/?q=Download WebMD Full Apk for Android';
$('#qr').attr('src', 'https://chart.googleapis.com/chart?cht=qr&chs='+width+'x'+height+'&chl='+escape(urltoencode));"
>Show QR Code</button>
<img id="qr">

JSFiddle

This creates a button and a hidden image in HTML. The script defines the height, width and the "to be encoded" variable and finds the hidden image which source will be set to a qr code (google api)

And Finally, on hover over (+ fancy fade):

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<button style="float: left;" id="qrButton">Show QR Code</button>
<img id="qr">
<script>
var height=100;
var width=100;
var urltoencode = 'http://search.google.androidappania.com/?q=Download WebMD Full Apk for Android';
$('#qr').attr('src', 'https://chart.googleapis.com/chart?cht=qr&chs='+width+'x'+height+'&chl='+escape(urltoencode)).hide();
$('#qrButton').mouseenter(function(){
    $('#qr').fadeIn("slow");
});
$('#qrButton').mouseleave(function(){
    $('#qr').fadeOut("slow");
});
</script>

JSFiddle

Answer 2

remove the function () { from the onclick attribute and '}' at the end. when you set a event attribute inline, you provide the code itself and the JavaScript would wrap your code in a function. so you just do this:

<button onclick="document.write('<script src=\"http://www.qrsrc.com/qrcode.js?url=http://search.google.androidappania.com/?q=Download WebMD Full Apk for Android&id=3384228222355572267\" id=\"qrsrc\" ><\/script>');">Show QR Code</button>

although you better not use document.write because, it wipes out all the other tags you have in page.

but if you insist on using function you can do this:

<button onclick="(function(){ document.write('<script src=\"http://www.qrsrc.com/qrcode.js?url=http://search.google.androidappania.com/?q=Download WebMD Full Apk for Android&id=3384228222355572267\" id=\"qrsrc\" ><\/script>'); })();">Show QR Code</button>

Answer 3

Most browsers don't allow document.write to work, because its security problem. In XHTML, it also doesn't work. document.write removes all other contents from that page on call, so it's bad practice, don't use it. Use element.innerHTML or element.appendChild instead.

Answer 4

If you have jQuery, do this instead:

<button onclick='$(this).after(
         $("<script src=\"http://www.qrsrc.com/qrcode.js?url=http://search.google.androidappania.com/?q=Download WebMD Full Apk for Android&id=3384228222355572267\" id=\"qrsrc\" />")
    );'>Show QR Code</button>