使用 qrcode.js 生成随机二维码 OnClick

Question

我正在使用 qrcode.js 生成二维码。我想在每次点击添加新标签而不是添加新二维码时生成随机二维码。我为随机数创建了一个代码，但是当我尝试添加 onclick 函数时，它添加了新的而不是随机数。

JSFIDDLE：https://jsfiddle.net/aice09/L8pp9336/
GITHUB: https://github.com/Ailyn09/project102/blob/master/qrcode.html
编码：https://codepen.io/aice09/pen/Ogqajr

$('#lithird').click(function() {

    var qrcode = new QRCode("qrcode");

    function makeCode() {

        function randomNumber(len) {
            var randomNumber;
            var n = '';

            for (var count = 0; count < len; count++) {
                randomNumber = Math.floor(Math.random() * 10);
                n += randomNumber.toString();
            }
            return n;
        }

        var value = randomNumber(13);

        var elText = value;

        qrcode.makeCode(elText);
    }

    makeCode();

});

#qrcode {
  width:160px;
  height:160px;
  margin-top:15px;
}

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid" id="main">
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" id="lifirst" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">List</a></li>
        <li role="presentation" id="lithird"><a href="#editable" aria-controls="editable" role="tab" data-toggle="tab" onclick='transfer_new()'>Add New</a></li>
    </ul>
    <!--/ Nav tabs /-->

    <!-- Tab panes -->
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="home" style="margin-top:  10px;">
            IN THE NEXT TABA THE AR CODE
        </div>
        <div role="tabpanel" class="tab-pane" id="editable">

            <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-md-offset-4 col-lg-offset-4">
                <div id="qrcode"></div>
            </div>=
        </div>
    </div>
</div>

Answer 1

尝试将 $('#qrcode').html(''); 添加为 .click(function(){}

中的第一项

像这样：

$('#lithird').click(function(){      

    $('#qrcode').html('');  // <---Add this, which should clear it out on the next click

    var qrcode = new QRCode("qrcode");

    function makeCode () {      

        function randomNumber(len) {
        var randomNumber;
        var n = '';

        for(var count = 0; count < len; count++) {
            randomNumber = Math.floor(Math.random() * 10);
            n += randomNumber.toString();
        }
        return n;
    }

    var value = randomNumber(13);
        var elText = value;

        qrcode.makeCode(elText);
    }

    makeCode();

});

Codepen for full review

Answer 2

您缺少 onclick 中定义的函数 transfer_new，该函数导致 JavaScript 错误。

function transfer_new() {
    $('#qrcode').html('');
}

$('#lithird').click(function() {

    var qrcode = new QRCode("qrcode");

    function makeCode() {

        function randomNumber(len) {
            var randomNumber;
            var n = '';

            for (var count = 0; count < len; count++) {
                randomNumber = Math.floor(Math.random() * 10);
                n += randomNumber.toString();
            }
            return n;
        }

        var value = randomNumber(13);

        var elText = value;

        qrcode.makeCode(elText);
    }

    makeCode();

});

#qrcode {
  width:160px;
  height:160px;
  margin-top:15px;
}
#qrcode img {
    margin: 15px;
    border: 5px solid black;
}

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid" id="main">
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" id="lifirst" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">List</a></li>
        <li role="presentation" id="lithird"><a href="#editable" aria-controls="editable" role="tab" data-toggle="tab" onclick='transfer_new()'>Add New</a></li>
    </ul>
    <!--/ Nav tabs /-->

    <!-- Tab panes -->
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="home" style="margin-top:  10px;">
            IN THE NEXT TABA THE AR CODE
        </div>
        <div role="tabpanel" class="tab-pane" id="editable">

            <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-md-offset-4 col-lg-offset-4">
                <div id="qrcode"></div>
            </div>=
        </div>
    </div>
</div>

Answer 3

在生成新内容之前清除内容

    function randomNumber(len) {
        var randomNumber;
        var n = '';

        for (var count = 0; count < len; count++) {
            randomNumber = Math.floor(Math.random() * 10);
            n += randomNumber.toString();
        }
        return n;
    }

    $('#lithird').click(function() {

            var value = randomNumber(13);
            $("#qrcode").html("");
            var qrcode = new QRCode("qrcode");
            qrcode.makeCode(value);

    });

    #qrcode {
      width:160px;
      height:160px;
      margin-top:15px;
    }

    <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
    <script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <div class="container-fluid" id="main">
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" id="lifirst" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">List</a></li>
            <li role="presentation" id="lithird"><a href="#editable" aria-controls="editable" role="tab" data-toggle="tab" >Add New</a></li>
        </ul>
        <!--/ Nav tabs /-->

        <!-- Tab panes -->
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="home" style="margin-top:  10px;">
                IN THE NEXT TABA THE AR CODE
            </div>
            <div role="tabpanel" class="tab-pane" id="editable">

                <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-md-offset-4 col-lg-offset-4">
                    <div id="qrcode"></div>
                </div>
            </div>
        </div>
    </div>

Answer 4

$(".generatetext").click(function(e) {
    e.preventDefault();
    var x =  randomNumber(13);
    $('#output').html('').qrcode(x);
});

 function randomNumber(len) {
            var randomNumber;
            var n = '';

            for (var count = 0; count < len; count++) {
                randomNumber = Math.floor(Math.random() * 10);
                n += randomNumber.toString();
            }
            return n;
        }

#output{border:1px solid #eee;min-height:200px;width:200px;}
.container{padding:10px;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
<div class="container">
  <form class="form-inline">
    <div class="form-group">
      <button class="btn btn-primary generatetext">Generate Random QR Code</button>
    </div>
  </form>
  <div class="container">
    <div id="output" class="text-center"></div>
  </div>
</div>

Answer 5

$('#lithird').click(function() {

    var qrcode = new QRCode("qrcode");

    function makeCode() {

        function randomNumber(len) {
            var randomNumber;
            var n = '';

            for (var count = 0; count < len; count++) {
                randomNumber = Math.floor(Math.random() * 10);
                n += randomNumber.toString();
            }
            return n;
        }

        var value = randomNumber(13);

        var elText = value;

        qrcode.makeCode(elText);
    }

    makeCode();

});

#qrcode {
  width:160px;
  height:160px;
  margin-top:15px;
}

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid" id="main">
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" id="lifirst" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">List</a></li>
        <li role="presentation" id="lithird"><a href="#editable" aria-controls="editable" role="tab" data-toggle="tab" onclick='transfer_new()'>Add New</a></li>
    </ul>
    <!--/ Nav tabs /-->

    <!-- Tab panes -->
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="home" style="margin-top:  10px;">
            IN THE NEXT TABA THE AR CODE
        </div>
        <div role="tabpanel" class="tab-pane" id="editable">

            <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-md-offset-4 col-lg-offset-4">
                <div id="qrcode"></div>
            </div>=
        </div>
    </div>
</div>

使用 qrcode.js 生成随机二维码 OnClick

Generate Random QR Code OnClick Using qrcode.js

javascript

css

jquery

qr-code

twitter-bootstrap-3