如何使用JavaScript询问用户输入并将其分配给数组的值

Question

Hi i use this code to view multiple URLs in an iframe , now i want to make a script in JavaScript which will ask from user to input urls and will assign URLs in arrays in the below code.

 var array = ["https://www.google.com", "https://codepen.io/", "https://www.amazon.in", "http://www.stackoverflow.com"]; var cnt = 0; $('button').click(function() { $('iframe').attr('src', array[cnt]); cnt++; if (cnt == array.length) { cnt = 0; } }); 

 iframe { width: 400px; height: 400px; } 

 <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> <button type="submit">Next Iframe</button> <iframe></iframe> 

Answer 1

Try following code

 var array = ["https://www.google.com", "https://codepen.io/", "https://www.amazon.in", "http://www.stackoverflow.com"]; var cnt = 0; $('button').click(function() { $('iframe').attr('src', array[cnt]); cnt++; if (cnt == array.length) { cnt = 0; } }); function addtoArrayFunc(){ var inputVal = $("#inputBox").val(); array.push(inputVal); } 

 iframe { width: 400px; height: 400px; } 

 <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> <button type="submit">Next Iframe</button> <iframe></iframe> <br> <input type="text" value="" placeholder="Enter the URL" id="inputBox"> <button onClick="addtoArrayFunc()">Add to array</button> 

Answer 2

Create a form, and an input. Then read input when user clicks on button/interact in some other way.

 var array = ["https://www.google.com", "https://codepen.io/", "https://www.amazon.in", "http://www.stackoverflow.com"]; var cnt = 0; $('button').click(function() { var userurl = $('input').val(); $('iframe').attr('src', array[cnt] = userurl); cnt++; if (cnt == array.length) { cnt = 0; } }); 

 iframe { width: 400px; height: 400px; } 

 <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> <iframe></iframe> <!-- don't reload page on --> <form action="javascript:void(0);"> <label> Get URL <input type="text"></input> </label> <button type="submit">Go </button> </form>