2017-03-15 12 views
1

QRcode apiのウェブサイト(http://goqr.me/api/)を使用してQRcodeを生成しようとしています。私は乱数を必要とし、生成されたランダムQRコードを持つためには、今これは私が持っているもの:QRcodeの乱数を生成しようとしています。Javascript

<!DOCTYPE html> 
<html> 
<body> 
<button onclick="myFunction()">Gerar QRcode</button> 

<p id="demo"></p> 

<script> 
function myFunction() { 
var x = Math.floor((Math.random() * 99) + 1); 
document.getElementById("demo").innerHTML = x; 
} 
</script> 
<img src = "https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=demo"> 
</body> 
</html> 

それは乱数を生成しますが、データの後に、それは(それがあるべき場所に取得していません= ここ数

誰も私を助けてくださいことはできますか?私が望むことをするための最善の方法を教えてください。

EDIT:「Gerar QRcode」ボタンを押したときに新しいQRコードが必要です。

+0

この*本当に*それはそれは何のためのAPIを使用することについて、サーバー側 – jbutler483

+0

を作成する必要があるように聞こえますか?私はDreamfactoryで作業していますが、現在は乱数を生成してそれが機能するかどうかを確認したいだけですが、将来はデータベースに追加します。 –

+0

''と 'document.getElementById(" randomQR ").src =" https://api.qrserver.com/v1/create-qr-code/?size=150x150&data= "+ x);' –

答えて

0

解決策の1つは、スクリプトからURLを生成することです。

<script> 
    function myFunction() { 
    var url = "https://api.qrserver.com/v1/create-qr-code/?size=150x150&data="; 
    var x = Math.floor((Math.random() * 99) + 1); 
    url = url + x; 
    document.getElementById("demo").src = url; 
    } 
</script> 
<img id="demo" src=""> 
</body> 
</html> 
+0

生成されたQRコードを表示しないでください。 –

2

すでにインラインスクリプトを使用しているので、次は適切であるかもしれない:

<script> 
var x = Math.floor((Math.random() * 99) + 1); 
document.write("<img src='https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=" + x + "'>") 
</script> 

ですから、掲載例ページは次のようになります。

<!DOCTYPE html> 
<html> 
<body>  
<script> 
    var x = Math.floor((Math.random() * 99) + 1); 
    document.write("<img src='https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=" + x + "'>") 
</script> 

</body> 
</html> 

編集:

あなたのコメントに記載されているようにボタンクリックで新しいQRコードを表示するには、画像のsrcを新しいURLに変更する必要があります。これを行うには、変更する画像を一意に選択する方法も必要です。画像タグにIDを使用し、URLの作成を関数に移動するのが最も簡単でしょう。

これはカレブMbakweがその答えに何をしたかと非常によく似ています。

<!DOCTYPE html> 
<html> 
    <body> 
    <img id='qrcode' src=''> 
    <button onclick="newQR()">Gerar QRcode</button> 
    <script> 
     function newQR() { 
     var x = Math.floor((Math.random() * 99) + 1); 
     document.getElementById('qrcode').src = "https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=" + x 
     } 
     newQR() 
    </script> 
    </body> 
</html> 

あなたはちょうどそれがAPIをテストするための作業を取得しようとしていた場合、これは問題ないはずです。それ以外の場合は、Unobtrusive Javascriptについて少し読んでコードをクリーンアップしてください。また、javascriptでimgタグを作成し、それをページに挿入すると、よりクリーンで長期的なソリューションになる可能性があります。

+0

これは問題なく動作しますが、ページを更新するときではなく、ボタンを押したときに新しいコードを表示します。ご助力ありがとうございます。 –

+0

ダニエル、あなたは命の恩人です!本当にありがとう、それは完全に働いています。将来、私はそれらを分離したい、今はただそれを持っていたい! –

+0

最後に新しいQR()がなぜなぜ簡潔に説明できますか?私はそれなしでテストし、それはまだ動作していた。ありがとうございました。 –

1

QRコードはリクエストのデータフィールドの内容です。したがって、ブラウザのURL https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=demoにアクセスすると、コンテンツに「デモ」というQRコードが表示されます。

代わりに行う必要があるのは、乱数を画像ソースの同じフィールドに連結することです。このような

何かが十分であろう:

<script> 
function myFunction() { 
var x = Math.floor((Math.random() * 99) + 1); 
document.getElementById("demo").src = document.getElementById("demo").src + x; 
} 
</script> 

<img id="demo" src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data="> 
+0

壊れた画像を表示し、QRコードを表示しません。 –