Question

我想实现以下目标：

我有一个带输入的文本区域（按钮类型）。

用户填写文本区域，否则，在提交时，正在显示的文本（在另一个div中）应该是不同的（从列表或其他单词中随机取出）。

目前我有以下内容：

<div class="row">
    <div clas="col-md-12">
        <form name="myForm">
Content to be added:
<textarea name="myContent">ADD YOUR NAME</textarea>
<input type="button" value="Add content" onClick="addContent('result', document.myForm.myContent.value); setCookie('content', document.myForm.myContent.value, 7);">
</form>
</div>
</div>

<script>

function addContent(divName, content) {
     document.getElementById(divName).innerHTML = content;
}

</script>

使得我的另一个div中的区域中添加了文本。我不知道应该采取什么路径来随机地显示特定列表中的另一个文本。

任何亮点，都会令人惊叹！

感谢您的时间

Answer 1

首先，您已使用JQuery标记标记了您的问题。所以我会用JQuery方式回复你。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

  </head>
  <body>
    <h1>Hello, world! <span name="result"></span></h1>

        <div class="row">
            <div clas="col-md-12">
                <form name="myForm" id="myForm">
        Content to be added:
        <textarea name="myContent" id="myContent">ADD YOUR NAME</textarea>
        <input type="button" value="Add content" id="mySubmitBtn">
        </form>
        </div>
        </div>


    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

    <script>

        // DOM ready
        $(function(){
            myArray = ['toto', 'tutu', 'titi', 'me', 'her !! '];

            console.log("ready to work with Jquery");
            //listener on sumbit btn (ie : your old onclick function)
            $("#myForm").on("click","#mySubmitBtn", function(){
                Randomize();
                addContent('result', $("#myContent").val());
                //setCookie('content', document.myForm.myContent.value, 7);
            });

            Randomize = function(){
                var randomNbr = Math.floor(Math.random() * myArray.length);
                if( $("#myContent").val() === ""){
                    $("#myContent").val(myArray[randomNbr]);
                }
            };

            function addContent(divName, content) {
                console.log('hello : '+content);
                $("[name='"+divName+"']").text(content);
            }
        });



    </script>

  </body>
</html>

所以，正如你所看到的那样：

我创建了一个引导页面，以便您可以测试我的代码
我已在您的输入中添加ID，因此在JQuery中访问它们更容易
我创建了一个数组，所以你将把你的未来伪（我猜）
我为您的提交点击事件做了一个倾听者
我创建了一个随机函数，如果textarea为空，则在输入textearea中放置一个伪！

只需复制一个html文件中的代码即可测试!!

从textarea提交的列表中显示随机文本

1 个答案: