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

Question

我正在使用​​生成qrcode。我想每次点击添加新选项卡而不是添加新的QR码时生成随机QR码。我创建了一个随机数的代码，但是当我尝试添加onclick函数时，它添加了新的不随机数。

的jsfiddle：https://jsfiddle.net/aice09/L8pp9336/
Github上：https://github.com/Ailyn09/project102/blob/master/qrcode.html
CODEPEN：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>

之前就清除内容210