简体   繁体   English

我在输出JavaScript时遇到问题

[英]I'm having trouble having my JavaScript output

Here's my current code for an array application. 这是我当前用于数组应用程序的代码。 I'm just having trouble getting it to output the array numbers. 我只是很难让它输出数组编号。

Array output (100 items): 数组输出(100个项目):

11,64,39,97,69,28,94,49,31,45,9,29,65,53,31,58,100,81,79,24,99,27,39,58,35,39,
10,24,98,26,84,70,42,93,17,69,69,17,12,4,21,75,86,25,82,32,69,21,42,24,42,100,
61,25,97,60,12,100,40,40,10,75,78,86,25,3,11,65,44,17,35,4,78,77,53,5,53,18,19,
26,31,51,6,68,58,49,54,27,58,6,98,51,79,21,32,38,34,35,83,70

Value 99 inserted at location 20 – there were 80 operations performed in this insertion 在位置20处插入了值99 –在此插入中执行了80次操作

Here is my JSFiddle. 是我的JSFiddle。

 <html> <body> <!--For moving element in center--> <div style='width:400px;margin: 100px auto auto;'> <!--To show the status of operation --> <p id="status"></p> <!--Some style to look page better--> <!--Added id to every input element, to refer it in script--> <!--change your input type to number, now it will only accept number.--> <div class='box'> <p>Enter Array Size:</p> <input style="width: 50px;" type="number" value="100" id="etArraySize"/> <input type="button" value="Create Array" id="btnCreateArray"/> </div> <div class='box'> <p>Enter Location:</p> <input type="number" value = "0" id="etArrayIndex"/> <p>Enter Value to Insert:</p> <input type="number" value="0" id="etArrayValue"/> <input type="button" value="Insert Into Array" id="btnInsertValue"/> </div> <div class='box'> <p>Enter Value to Find:</p> <input type="number" value="0" id="etArrayFind"/> <input type="button" value="Search Array" id="btnFindValue"/> </div> <!--It will display the operation count--> <div class="box" id="counter"> </div> </div> </body> <!--Simple yet beautiful style--> <style> .box{ padding: 2px 10px 10px; background-color:#FAFAFA; box-shadow:0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2); border-radius: 2px; margin:8px; } </style> <script> //Script started. //global variable myArray. var myArray; //For count the number of operation when inserting, var count=0; //Reference all input element by their id to variable, var etArraySize = document.getElementById("etArraySize"); var etArrayIndex = document.getElementById("etArrayIndex"); var etArrayValue = document.getElementById("etArrayValue"); var etArrayFind = document.getElementById("etArrayFind"); var btnCreateArray = document.getElementById("btnCreateArray"); var btnInsertValue = document.getElementById("btnInsertValue"); var btnFindValue = document.getElementById("btnFindValue"); var mStatus = document.getElementById("status"); //Adding click listener to all 3 buttons. btnCreateArray.addEventListener("click",function(){ //If button create array click, create array of provided size in etArraySize. createArray(etArraySize.value); }); btnInsertValue.addEventListener("click",function () { //Insert into array. //parseInt will convert the text to integer. //You may remove this, but this is good practise. insertIntoArray(myArray,parseInt(etArrayIndex.value),parseInt(etArrayValue.value)); }); btnFindValue.addEventListener("click",function () { //search the array. SearchArray(myArray,parseInt(etArrayFind.value)); }); //create array function with a single param e means size of array. function createArray(e){ //Convert the value in integer. var val = parseInt(e); //Initialize global myArray with given size. myArray = Array(val); //Loop through it's length. for(var i=0;i<myArray.length;i++){ //Assign the random value which is between 1 <= x <= 100 myArray[i] = Math.floor(Math.random()*100)+1; } //Show the message at top of screen, where <p id="status"..... is defined. showMessage("Array created of size " + val); } //Insert Array function. function insertIntoArray(array,index,value) { //First get the value which will replace by new value. var oldValue = array[index]; //Now assign the new value to given index, array[index] = value; //You did new operation on array, count it by 1. count++; //Loop through array from its last index to given index + 2. //because array[index] contains new value. //array[index] + 1 contains the replace value, as it shift by one, (manually) //and all other index also shift by one through loop. for(var i=array.length-1; i>index+1;i--){ //shift value to upper index. array[i] = array[i-1]; count++; //Operation count ++. } //Check if the given index is not the last element. if(index < array.length-1){ //After loop, put the replaceValue to arrayIndex[index+1] array[index+1] = oldValue; count++; } //Show the message at top. showMessage("Added " + value + " at position " + index); //Show the count at bottom. showCount(count); } function SearchArray(array,value) { //It will count the operation in SearchArray. //If you want to count this operation with previous function, //use count instead of searchCount. var searchCount=0; //to store the index, where the value is. var foundIndex = -1; //Loop through array and compare if the value exists at ith index or not. for(var i=0;i<array.length;i++){ searchCount++; //If yes, save the index, break the loop. if(array[i] == value){ foundIndex = i; break; } } //Check if value is found or not. //Display message according to operation. if(foundIndex== -1){ showMessage("Element not found in array. Total Searched: " +searchCount); }else{ showMessage("Element found at index: " + foundIndex + ", search count: " +searchCount); showCount(searchCount); } } function showMessage(e) { //it will set the given message to mStatus, defined at top. mStatus.innerHTML = e; //You may remove setTimeOut function, it will just remove the message after //5 second. setTimeout(function () { mStatus.innerHTML = ""; },5000); } //To display message at the bottom, change it according to your need. function showCount(var e) { document.getElementById("counter").innerText = "Operation count on array: " + e; e = 0; } </script> </html> 

I have modified one line of your code. 我已经修改了您的代码的一行。 It seems working now. 看来现在可以了。 Line 186 : "function showCount(var e) {" to "function showCount(e) {"; 第186行:“ function showCount(var e){”到“ function showCount(e){”; https://jsfiddle.net/c71wx59g/2/ https://jsfiddle.net/c71wx59g/2/

 <html> <body> <!--For moving element in center--> <div style='width:400px;margin: 100px auto auto;'> <!--To show the status of operation --> <p id="status"></p> <!--Some style to look page better--> <!--Added id to every input element, to refer it in script--> <!--change your input type to number, now it will only accept number.--> <div class='box'> <p>Enter Array Size:</p> <input style="width: 50px;" type="number" value="100" id="etArraySize"/> <input type="button" value="Create Array" id="btnCreateArray"/> </div> <div class='box'> <p>Enter Location:</p> <input type="number" value = "0" id="etArrayIndex"/> <p>Enter Value to Insert:</p> <input type="number" value="0" id="etArrayValue"/> <input type="button" value="Insert Into Array" id="btnInsertValue"/> </div> <div class='box'> <p>Enter Value to Find:</p> <input type="number" value="0" id="etArrayFind"/> <input type="button" value="Search Array" id="btnFindValue"/> </div> <!--It will display the operation count--> <div class="box" id="counter"> </div> </div> </body> <!--Simple yet beautiful style--> <style> .box{ padding: 2px 10px 10px; background-color:#FAFAFA; box-shadow:0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2); border-radius: 2px; margin:8px; } </style> <script> //Script started. //global variable myArray. var myArray; //For count the number of operation when inserting, var count=0; //Reference all input element by their id to variable, var etArraySize = document.getElementById("etArraySize"); var etArrayIndex = document.getElementById("etArrayIndex"); var etArrayValue = document.getElementById("etArrayValue"); var etArrayFind = document.getElementById("etArrayFind"); var btnCreateArray = document.getElementById("btnCreateArray"); var btnInsertValue = document.getElementById("btnInsertValue"); var btnFindValue = document.getElementById("btnFindValue"); var mStatus = document.getElementById("status"); //Adding click listener to all 3 buttons. btnCreateArray.addEventListener("click",function(){ //If button create array click, create array of provided size in etArraySize. createArray(etArraySize.value); }); btnInsertValue.addEventListener("click",function () { //Insert into array. //parseInt will convert the text to integer. //You may remove this, but this is good practise. insertIntoArray(myArray,parseInt(etArrayIndex.value),parseInt(etArrayValue.value)); }); btnFindValue.addEventListener("click",function () { //search the array. SearchArray(myArray,parseInt(etArrayFind.value)); }); //create array function with a single param e means size of array. function createArray(e){ //Convert the value in integer. var val = parseInt(e); //Initialize global myArray with given size. myArray = Array(val); //Loop through it's length. for(var i=0;i<myArray.length;i++){ //Assign the random value which is between 1 <= x <= 100 myArray[i] = Math.floor(Math.random()*100)+1; } //Show the message at top of screen, where <p id="status"..... is defined. showMessage("Array created of size " + val); } //Insert Array function. function insertIntoArray(array,index,value) { //First get the value which will replace by new value. var oldValue = array[index]; //Now assign the new value to given index, array[index] = value; //You did new operation on array, count it by 1. count++; //Loop through array from its last index to given index + 2. //because array[index] contains new value. //array[index] + 1 contains the replace value, as it shift by one, (manually) //and all other index also shift by one through loop. for(var i=array.length-1; i>index+1;i--){ //shift value to upper index. array[i] = array[i-1]; count++; //Operation count ++. } //Check if the given index is not the last element. if(index < array.length-1){ //After loop, put the replaceValue to arrayIndex[index+1] array[index+1] = oldValue; count++; } //Show the message at top. showMessage("Added " + value + " at position " + index); //Show the count at bottom. showCount(count); } function SearchArray(array,value) { //It will count the operation in SearchArray. //If you want to count this operation with previous function, //use count instead of searchCount. var searchCount=0; //to store the index, where the value is. var foundIndex = -1; //Loop through array and compare if the value exists at ith index or not. for(var i=0;i<array.length;i++){ searchCount++; //If yes, save the index, break the loop. if(array[i] == value){ foundIndex = i; break; } } //Check if value is found or not. //Display message according to operation. if(foundIndex== -1){ showMessage("Element not found in array. Total Searched: " +searchCount); }else{ showMessage("Element found at index: " + foundIndex + ", search count: " +searchCount); showCount(searchCount); } } function showMessage(e) { //it will set the given message to mStatus, defined at top. mStatus.innerHTML = e; //You may remove setTimeOut function, it will just remove the message after //5 second. setTimeout(function () { mStatus.innerHTML = ""; },5000); } //To display message at the bottom, change it according to your need. function showCount(e) { document.getElementById("counter").innerText = "Operation count on array: " + e; e = 0; } </script> </html> 

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

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM