Looping in Javascript array - javascript

I have a simple quesetion and I'm not sure why the array content is not being returned properly. I'm pretty sure this is something simple but somehow I'm not getting the results I want. The scenario is that a variable "compare" is set to a value e.g. "apple" and I am looping into the array, and, if apple matches an index print that into the text field. It doesn't do it and it always says the "not the same" value. For value dog it works. It seems like it reaches the last array then does comparisons. Help please.
Code below
<!DOCTYPE html>
<html>
<body>
<script>
function myFunction() {
var text = "";
var i;
var arr = ["apple", "banana", "carrot", "dog"];
var compare = "apple";
for (i = 0; i < arr.length; i++) {
if (arr[i] == compare) {text = "The value is " + arr[i] + "<br>"; }
else if (compare == "" || compare == null) { text = "The value is blank"; }
else if (arr[i] != compare) {text = "not the same"; }
else {text ="some error";}
}
document.getElementById("demo").innerHTML = text;
}
</script>
<p>Click the button to do a loop with a break.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
</body>
</html>

function print(msg) {
document.getElementById("demo").innerHTML += msg + '</br>';
}
function myFunction() {
var text = "";
var i;
var arr = ["apple", "banana", "carrot", "dog"];
var compare = document.getElementById('compare').value;
if (!compare) {
print('Compare is empty');
return;
} else {
print('Comparing with ' + compare);
}
for (i = 0; i < arr.length; i++) {
if (arr[i] == compare) {
print("The value is at index " + i + " is " + arr[i]);
return; //results found, break out of the for loop
} else if (arr[i] != compare) {
print("not the same");
} else {
print("some error");
}
}
print("Could not find " + compare + " in array");
}
<!DOCTYPE html>
<html>
<body>
<script>
</script>
<p>Click the button to do a loop with a break.</p>
<input type="text" id="compare" placeholder="Compare to" />
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
</body>
</html>
For performance reasons it is better to validate the value of compare before the loop starts. You can break out of the loop using break, continue or return keywords.

It seems like it reaches the last array then does comparisons. Help please.
In effect, yes, because you never stop the loop. So all of the previous assignments you've done to document.getElementById("demo").innerHTML are overwritten by the final one.
If you want to stop when you find a match, use break to break out of the loop.
If you want the element to have a list of what had happened (which I think might be what you were trying to do, it's hard to tell), build the list up in text and then assign at the end:
if (compare == "" || compare == null) {
// Doesn't make sense to loop in this case, presumably
text = "The value is blank";
} else {
text = "";
for (i = 0; i < arr.length; i++) {
if (arr[i] == compare) {
text += "The value matches " + arr[i] + "<br>";
// ^--- note the +=
} else {
text += "The value doesn't match " + arr[i] + "<br>";
// ^--- note the +=
}
}
}
document.getElementById("demo").innerHTML = text;

You never break the for loop. You must use break; to exit the loop when the if condition is met.
Here your is your solution: http://jsfiddle.net/urahara/rvLyfsto/
and your code:
function myFunction() {
var text = "";
var i;
var arr = ["apple", "banana", "carrot", "dog"];
var compare = "apple";
for (i = 0; i < arr.length; i++) {
if (arr[i] == compare) {
text = "The value is " + arr[i] + "<br>";
break;
} else if (compare == "" || compare == null) {
text = "The value is blank";
break;
} else if (arr[i] != compare) {
text = "not the same";
break;
} else {
text = "some error";
break;
}
}
document.getElementById("demo").innerHTML = text;
}
Cheers!

Related

How to change the letters in a text on hover

I'm looking for a way to change the letters in a text when you hover them.
After that, they will eventually not got back to normal and stay changed.
So I found a code to change the color of each letter of a text, but I'm looking for the same thing that picks the next leter in the alphabet.
Thanks a lot for the help.
$(document).ready(function(){
var letters = $('p').text();
var nHTML = '';
for(var letter of letters) {
nHTML+="<span class='x'>"+letter+"</span>";
}
$('p').html(nHTML);
})
.x:hover {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<p>Hello World!</p>
I also found this code that let you change a text with an id.
I just don't know how to apply that to all my characters individually.
const $foo = $('#foo');
$foo.hover(function(){
$foo.text('Blah');
}, function(){
$foo.text('Foo');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
<li>Foo</li>
</nav>
Also, I have this script that can find the next letter.
function LetterChanges(str) {
var result = "";
for (var i = 0; i < str.length; i++) {
if (122 == str.charCodeAt(i)) {
result += "a";
} else if (90 == str.charCodeAt(i)) {
result += "A";
} else if ((65 <= str.charCodeAt(i) && str.charCodeAt(i) <= 89) || (97 <= str.charCodeAt(i) && str.charCodeAt(i) <= 121)) {
result += String.fromCharCode(str.charCodeAt(i) + 1);
} else {
result += str.charAt(i);
}
}
return result;
}
console.log(LetterChanges("AaZz+cod!foo"));
$('#result').html(LetterChanges("paul & rémi"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 id="result"></h1>
If I understand what you need, then this is the solution:
function nextLetter(ch) {
if (!ch.match(/[a-z]/i)) return ch;
else if (ch === 'Z') return 'A';
else if (ch === 'z') return 'a';
return String.fromCharCode(ch.charCodeAt(0) + 1);
}
$(document).ready(function(){
var letters = $('p').text();
var nHTML = '';
for(var letter of letters) {
nHTML+="<span class='x'>"+letter+"</span>";
}
$('p').html(nHTML);
$(".x").hover(function(e) {
if (e.type === "mouseenter") $(this).text(nextLetter($(this).text()));
});
})
Explanation:
nextLetter
checks whether it's a letter and does nothing if it's not a letter
if it's a Z or z, then will start over the alphabet, keeping the case
otherwise finds the next letter
the for cycle creates spans containing single letters, having the class of x
this is why the CSS hover rule works
we can create Javascript/jQuery events
I have created a Javascript event which changes the letter to the next one on hover
Fiddle: https://jsfiddle.net/1ar8uL4s/

Javascript array push issue or loop issue

When I'm running my code I'm going into 'do' loop, then I'm entering input 'new' and then trying to add new array, but for some reason my code starting looping in if(answ == "new"). What am I doing wrong?
Here is my code:
var answ;
var arr = [];
do{
answ = prompt("What would like to do?");
if(answ == "new"){
var add = prompt("Add new todo: ");
add = arr.push(answ);
}
else if(answ == "list"){
for(var i=0; i<arr.length; ++i){
answ = answ + arr[i] + '<br>';
}
}
else if(answ == "delete"){
var choose = prompt("Which one (index)?");
delete arr[choose];
}
}while(answ !== "quit")
Don't run in browser in current form (never ending loop)
See if this helps you Mark.
there were some errors with you logic and storing values and also you were not showing the values, if what I suggest is right.
var answ;
var arr = [];
do {
answ = prompt("What would like to do?");
if (answ == "new") {
var add = prompt("Add new todo: ");
arr.push(add);
} else if (answ == "list") {
var output = '';
for (var i = 0; i < arr.length; ++i) {
output += arr[i] + '\r\n';
}
alert('listing:' + '\r\n' + output );
} else if (answ == "delete") {
var choose = prompt("Which one (index)?");
arr.splice(choose,1);
} else {
if(answ !== "quit")
alert('option invalid!');
}
} while (answ !== "quit")

Javascript string formatting - replace in string saved in a variable

Task is simple write numbers from 1 to 99 and replace all numbers where: num (mod 3) =0 with each num (mod 5) =0 -> mat, num ( mod 3=0 && mod 5=0 ) with each mat, all others remains the same. That is easy but the formatting is horrible so I want to do this: insert a space between every number and place every "special" word (dividable by 3,5 or both) on a separate line. I know I have to use string.prototype.format but how exactly? here is my current code:
<html>
<body>
<p>Click the button to join two strings into one new string.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var text = [];
var res = " ";
for (i=1; i<100; i++){
if (i%3 == 0 && i%5 == 0){
text[i]= "SachMat ";
}
else if (i%3 == 0){
text[i]= 'sach ';
}
else if (i%5 == 0){
text[i]= 'mat ';
}
else {
text[i]= i;
}
var res = res.concat(text[i]);
}
document.getElementById("demo").innerHTML = res;
}
</script>
</body>
</html>
Try this
function myFunction() {
var text = [];
var res = " ";
for (i=1; i<100; i++){
if (i%3 == 0 && i%5 == 0){
text[i]= "<br/>SachMat<br/>";
} else if (i%3 == 0) {
text[i]= 'sach ';
} else if (i%5 == 0){
text[i]= 'mat ';
} else {
text[i]= i;
}
res = res.concat(' ' + text[i]);
}
document.getElementById("demo").innerHTML = res;
}

Trying to add and remove items from an array

The script works by asking user for add or remove an item in the array. Then asks to continue this loop. The problem here is that my script doesn't seem to match my user's input (removeItem) to the item in the list (myList[i]). I'm at a lost as to why this is failing to match.
// new method for removing specific items from a list
Array.prototype.remove = function(from,to) {
var rest = this.slice((to || from) + 1 || this.length);
this.length = from < 0 ? this.length + from : from;
return this.push.apply(this, rest);
};
printList = function() {
var listLength = myList.length;
for (i = 0; i < listLength; i++) {
document.write(i + ":");
document.write(myList[i] + "<br/>");
};
document.write("<br/><br/>");
};
// initial list
var myList = new Array ();
if (myList.length === 0) {
document.write("I have " + myList.length + " item in my list. It is: <br/>");
}
else {
document.write("I have " + myList.length + " items in my list. They are: <br/>");
}
printList();
var continueAdding = "yes";
var askToContinue = "";
while (continueAdding === "yes") {
// loop
var askUser = prompt("What do you want to [A]dd or [R]emove an item to your inventory?").toUpperCase();
switch (askUser) {
case "A": { // add an user specified item to the list
var addItem = prompt("Add something to the list");
myList.push(addItem);
printList();
break;
}
case "R": { // remove an user specified item from the list
var removeItem = prompt("what do you want to remove?");
var listLength = myList.length;
for (i = 0; i < listLength; i++) {
if (removeItem === myList[i]) {
document.write("I found your " + removeItem + " and removed it.<br/>");
myList.remove(i);
}
else {
document.write(removeItem + " does not exist in this list.<br/>");
break;
}
if (myList.length === 0) {
myList[0] = "Nada";
}
};
printList();
break;
}
default: {
document.write("That is not a proper choice.");
}
};
askToContinue = prompt("Do you wish to continue? [Y]es or [N]o?").toUpperCase(); // ask to continue
if (askToContinue === "Y") {
continueAdding = "yes";
}
else {
continueAdding = "no";
}
}
Your loop never allows it to loop through all the items, because it breaks on the first iteration if the item doesn't match.
The break statement should be in the if block, not in the else block - use this instead:
for (i = 0; i < listLength; i++) {
if (removeItem === myList[i]) {
document.write("I found your " + removeItem + " and removed it.<br/>");
myList.remove(i);
break;
}
else {
document.write(removeItem + " does not exist in this list.<br/>");
}
};
if (myList.length === 0) {
myList[0] = "Nada";
}
Also, note that it's looking for an exact match, case sensitive, same punctuation, and everything. If you want it to be a little more lenient you'll need to modify the script to convert both strings to lowercase and strip punctuation before comparing them.
Edit: Just noticed something else -- testing for an empty list needs to be done outside the loop. I updated the above code to reflect this.

Next/Previous button throws error

I keep getting the following error when I try to insert values by clicking the Next button on values that are already entered in.
Unable to get the value of the property '0': object is null or undefined.
I believe the error is happening at the last value in the array. I indicated the line below with a comment in the code. I want it to get the next value in the array but there isn't one created yet (it gets the next value just fine if the next value is not the last one in the array).
I think that is the reason it's throwing an object null. However, I can't seem to check for the null/undefined and set it using statements such as result[count+1][0] == undefined because it doesn't work! It always throws an error no matter what I do.
Some help would be much appreciated.
Test case:
Insert a value in text box 1 and text box 2
Click Next
Click Previous (in order to edit the values inserted above)
Change the values in the text boxes to something else
Click Next -- error happens
Code:
<html>
<head>
<script type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
var result = new Array();
var count = 0;
var input1 = new Array();
var input2 = new Array();
function move(direction) {
if(direction == 'next')
{
var rate1 = [document.getElementById("txt1").value];
var rate2 = [document.getElementById("txt2").value];
if (result.length == count){
if (rate1 == '' || rate2 == '') {
alert('you need to put in a value');
}
else {
result.push([[rate1], [rate2]]);
document.getElementById("txt1").value = '';
document.getElementById("txt2").value = '';
count++;
}
}
else {
try{
(result[count][0]) = document.getElementById("txt1").value;
(result[count][1]) = document.getElementById("txt2").value;
document.getElementById("txt1").value = result[count++][0]; //error happening here. trying to show next value but there isn't one created yet.
document.getElementById("txt2").value = result[count++][1];
document.getElementById("txt1").value = '';
document.getElementById("txt2").value = '';
}
catch(err) {
alert(err.description);
}
count++;
}
}
if (direction == 'prev')
{
if(count <= 0)
{
alert("no more elements");
}
else
{
var prev_val1 = (result[count - 1][0]);
document.getElementById("txt1").value = prev_val1;
var prev_val2 = (result[count - 1][1]);
document.getElementById("txt2").value = prev_val2;
count--;
}
}
document.getElementById("txtresult").value = result;
}
</script>
<li>text 1</li>
<input type="text" id="txt1"/>
<br>
<li>text 2</li>
<input type="text" id="txt2"/>
<br>
<input type="button" id="btn" value="next" onclick="move('next')" />
<input type="button" id="btnprevious" value="previous" onclick="move('prev')" />
<br>
<input type="text" id="txtresult"/>
</body>
</html>
You can add a check like this:
if (typeof result[count++] === "undefined") { /* do or do not */ };
Right before:
document.getElementById("txt1").value = result[count++][0];
function move(direction) {
if(direction == 'next')
{
var rate1 = [document.getElementById("txt1").value];
var rate2 = [document.getElementById("txt2").value];
if (result.length == count){
if (rate1 == '' || rate2 == '') {
alert('you need to put in a value');
}
else {
result.push([[rate1], [rate2]]);
document.getElementById("txt1").value = '';
document.getElementById("txt2").value = '';
count++;
}
}
else {
try{
(result[count][0]) = document.getElementById("txt1").value;
(result[count][1]) = document.getElementById("txt2").value;
if( result[ ++count ] ) // this checks for undefined
{
document.getElementById("txt1").value = result[count][0]; //error happening here. trying to show next value but there isn't one created yet.
document.getElementById("txt2").value = result[count][1];
}
else
{
document.getElementById("txt1").value = '';
document.getElementById("txt2").value = '';
count--; // decrement counter
}
}catch(err) {
alert(err.description);
}
count++;
}
}
if (direction == 'prev')
{
if(count <= 0)
{
alert("no more elements");
}
else
{
var prev_val1 = (result[count - 1][0]);
document.getElementById("txt1").value = prev_val1;
var prev_val2 = (result[count - 1][1]);
document.getElementById("txt2").value = prev_val2;
count--;
}
}
document.getElementById("txtresult").value = result;
}
why do you do count++ in these 2 lines?
document.getElementById("txt1").value = result[count++][0]; //error happening here. trying to show next value but there isn't one created yet.
document.getElementById("txt2").value = result[count++][1];
seems like interpreter first increment the count and then try to get item of result which is undefined...
as i undestand pressing previous must "set cursor" to previous vaues so you can change previously entered values... in this case you shouldn't increment counter in these lines.. just remove ++
I don't get why you embedded the arrays three deep. I cleaned up some of the code and made the names more understandable (at least to me).
Regardless, when you were on the last value in the array, count++ didn't exist. Also, don't use count++ as this will increment your count var. Don't use ++ to simplify unless you truly know what you're doing and want to increment. Also, tricky shortcuts will confuse people trying to read your code, so try to be as explicit as possible. (There are exceptions to this statement, as in, you don't need to write for a person who has never coded before)
Here is working javascript:
var result = new Array();
var count = 0;
function move(direction) {
if(direction == 'next') {
var box1 = document.getElementById("txt1").value; //why did you wrap these as arrays?
var box2 = document.getElementById("txt2").value; //
if (result.length == count){
if (box1 == '' || box2 == '') {
alert('you need to put in a value');
} else {
result.push([box1, box2]); //why did you wrap individual numbers in arrays?
document.getElementById("txt1").value = '';
document.getElementById("txt2").value = '';
}
} else {
try{
result[count][0] = document.getElementById("txt1").value;
result[count][1] = document.getElementById("txt2").value;
if(result[count+1]) { // need this because if on last value in the array, count+1 will not exist yet
document.getElementById("txt1").value = result[count+1][0]; //do not do ++. this will increment count here. don't be tricky with ++
document.getElementById("txt2").value = result[count+1][1]; //because it will confuse others and lead to off by 1 errors
} else {
document.getElementById("txt1").value = '';
document.getElementById("txt2").value = '';
}
}
catch(err) {
alert(err.description);
}
}
count++;
}
if (direction == 'prev') {
if(count <= 0){
alert("no more elements");
} else {
var prev_val1 = result[count - 1][0];
var prev_val2 = result[count - 1][1];
document.getElementById("txt1").value = prev_val1;
document.getElementById("txt2").value = prev_val2;
count--;
}
}
document.getElementById("txtresult").value = result;
}

Categories