我在输出JavaScript时遇到问题
[英]I'm having trouble having my JavaScript output
问题描述
这是我当前用于数组应用程序的代码。 我只是很难让它输出数组编号。
数组输出（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
在位置20处插入了值99 –在此插入中执行了80次操作
这是我的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>
1 个解决方案
解决方案1
0 已采纳 2018-01-28 07:21:40
我已经修改了您的代码的一行。 看来现在可以了。 第186行：“ function showCount（var e）{”到“ function showCount（e）{”； 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>
我的javascript比较函数的语法有问题
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.