堆栈内存溢出
  繁体   English   中英

在模式弹出窗口中显示随机数

[英]display random numbers in a modal popup

 原文  2018-04-23 11:18:39  9   4    javascript/ twitter-bootstrap

问题描述

我正在尝试生成随机数并将其显示在按钮单击事件的弹出模式中。 然而，function 似乎并不正确。 我正在使用引导程序和 javascript。

当我单击按钮打开模式时，我希望随机数显示在模式内的文本框中。

错误说：

未捕获的类型错误：无法读取未定义的属性“随机字段”

任何帮助表示赞赏。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" onClick="randomString(this);" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Please make a note of your ticket</h4>
        </div>
        <div class="modal-body">
          <input type="text" id="randomfield" value="">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

</div>

</body>
</html>
  <script>
function randomString() {
    var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";
    var string_length = 8;
    var randomstring = '';
    for (var i=0; i<string_length; i++) {
        var rnum = Math.floor(Math.random() * chars.length);
        randomstring += chars.substring(rnum,rnum+1);
    }
    document.randform.randomfield.value = randomstring;
}

</script>

4 个解决方案

解决方案1
 4  2018-04-23 11:22:04

使用getElementById在模型文本框中将id值设置为randomfield的随机字符串设置为： 

 function randomString() { var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz"; var string_length = 8; var randomstring = ''; for (var i=0; i<string_length; i++) { var rnum = Math.floor(Math.random() * chars.length); randomstring += chars.substring(rnum,rnum+1); } document.getElementById('randomfield').value = randomstring; //or even this as you are using JQuery //$('#randomfield').val(randomstring); } 
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="container"> <h2>Modal Example</h2> <!-- Trigger the modal with a button --> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" onClick="randomString(this);" data-target="#myModal">Open Modal</button> <!-- Modal --> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Please make a note of your ticket</h4> </div> <div class="modal-body"> <input type="text" id="randomfield" value=""> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div>

解决方案2
 0  2018-04-23 11:34:04

尝试这个 

    <script>
     function randomString() {
       var chars = 
          "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";
            var string_length = 8;
              var randomstring = '';
          for (var i=0; i<string_length; i++) {
          var rnum = Math.floor(Math.random() * chars.length);
             randomstring += chars.substring(rnum,rnum+1);
          }

                 return randomstring;

          }
       var box = document.querySelector('#randomfield');
       var element = addEventListener('click',function(){
      box.value = randomString();
               })

     </script>

解决方案3
 0  2018-04-23 11:37:38

This code is Runable Try it     
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" onClick="randomString(this);" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Please make a note of your ticket</h4>
        </div>
        <div class="modal-body">
          <input type="text" id="randomfield" value="">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

</div>

</body>
</html>
  <script>
function randomString() {
    var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";
    var string_length = 8;
    var randomstring = '';
    for (var i=0; i<string_length; i++) {
        var rnum = Math.floor(Math.random() * chars.length);
        randomstring += chars.substring(rnum,rnum+1);
    }
    document.getElementById("randomfield").value = randomstring;

}

</script>

解决方案4
 0  2018-04-23 11:40:28

解

我尝试了一下您的代码。

要使其正常工作，您必须调整以下两点：

1）添加结束</script>标记添加文档的末尾

2）更改document.randform.randomfield.value = randomstring;

到document.getElementById('randomfield').value = randomstring;

说明

为了访问DOM中的元素，您应该使用document.getElementById()或类似的函数。 Javascript的Document Object提供了一个用于处理html页面（DOM）的接口，它不能直接表示您的所有html。

请考虑阅读有关javascript的Document对象和getElementById()函数的Document 。

=> https://developer.mozilla.org/zh-CN/docs/Web/API/Document

=> https://developer.mozilla.org/zh-CN/docs/Web/API/Document/getElementById

解决方案5
 -3  2022-09-02 21:12:05

请问如果我用产品替换文本作为弹出窗口，我可以对代码进行什么调整？

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 显示模态弹出窗口 以模态形式显示日历 在模态弹出窗口中显示水晶报表 用Javascript显示2个随机数 无法将小图像传递到模式弹出窗口并显示 在Magnific Popup顶部显示JQuery Modal 在查询中使用for循环显示模式弹出窗口 在某些按钮单击时不显示弹出模式 为什么我的jQuery模式弹出窗口不显示？ 从javascript显示引导模式弹出窗口不起作用
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM