2017-03-15 2 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> 

그것은 임의의 숫자를 생성하지만, 데이터 후에는 (그것이 있어야하는 곳에 도착하지 않는 = 여기에 숫자

아무도 도와 줄 수 있습니까? 또는 내가 원하는 것을 할 수있는 가장 좋은 방법을 안내해줍니다.

편집 : "Gerar QRcode"버튼을 누르면 새로운 QRcode가 필요합니다.

+0

이 * 정말 *이 무엇을 위해 API를 사용하는 방법에 대한 서버 측 – jbutler483

+0

을 작성해야합니다 같은 소리? 저는 Dreamfactory와 함께 일하고 있습니다. 이제는 난수를 생성하여 작동하는지 확인하려고합니다. 그러나 나중에 장래에 데이터베이스에 추가 할 것입니다. –

+0

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

답변

0

한 가지 해결책은 스크립트에서 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

Daniel, 당신은 생명의 은인입니다! 고맙습니다. 완벽하게 작동합니다. 미래에 나는 그것들을 분리하고 싶다. 왜냐하면 지금 나는 단지 그것을 가고 싶다 !! –

+0

왜 마지막에 newQR()을 사용했는지 간단히 설명 할 수 있습니까? 나는 그것없이 테스트했고 여전히 작동하고 있었다. 고맙습니다. –

1

api 설명서에서 QR 코드는 요청한 데이터 필드의 내용이므로 브라우저에서 https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=demo이라는 URL을 방문하면 이미 "데모"라는 내용의 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 코드를 표시하지 않습니다. –