Problem with array

Straw · December 14, 2018

Hey guys...

I'm making a program where I want to store some values in an array. The values are taken from a couple of input fields. I use the input fields randomly (not in order). But I want to store these values in order in the array. I thought I could do this by checking if a certain input field is filled. And to make sure the value from that field did not get added to the array every time I hit the event-button I changed the background color of the input field to check if I already had added that value to the array.

<script>

var x = 0;

var array = [];



$("button").on("click", function() {

console.log("Before IF: " + $("input:eq(0)").val() + " - " + $("input:eq(0)").css("background-color"));

if($("input:eq(0)").val() != "" && $("input:eq(0)").css("background-color") != "rgb(255,255,0)") {

array[x] = $("input:eq(0)").val();

x++;

$("input:eq(0)").css("background-color","rgb(255,255,0)");

} else if($("input:eq(1)").val() != "" && $("input:eq(1)").css("background-color") != "rgb(255,255,0)") {

array[x] = $("input:eq(1)").val();

x++;

$("input:eq(1)").css("background-color","rgb(255,255,0)");

} else if($("input:eq(2)").val() != "" && $("input:eq(2)").css("background-color") != "rgb(255,255,0)") {

array[x] = $("input:eq(2)").val();

x++;

$("input:eq(2)").css("background-color","rgb(255,255,0)");

}

console.log("After IF: " + $("input:eq(0)").val() + " - " + $("input:eq(0)").css("background-color"));

console.log(array);

console.log("---------------------------------");

});

</script>

justsomeguy · December 14, 2018

What questions do you have?

You can use Array.push to add a value to the end of an array, and Array.indexOf to check if a value already exists.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

Straw · December 15, 2018

The problem I have is that when I hit the event-button it keeps adding the same input value to the array every time. Let's say I use the second input field and put the number 3 there. I then click the button and the program adds a "3" to my array. If I then click the button again it adds another "3" to the array. That is not supposed to happen. I was hoping my program could keep track of which input field that's been used.

justsomeguy · December 17, 2018

You can use indexOf to check if an item is in the array before you add it. If you want to keep track of which inputs have been used, you can do that too with another array or a data attribute on the input element.

Instead of getting each input individually, you can use document.querySelectorAll to get all elements in a list and loop through them to test each one. Assuming they get returned in the same order every time, if you stored the indexes of which elements you've already used in an array then you can check that array to see whether or not to skip that element. Or, you can just use indexOf if you're only worried about the same value going into the array.

Straw · December 30, 2018

Hey again..

I'm sorry but I still don't know how to solve this problem. Thanks for your answer though. I thought I could explain my problem bit by bit and maybe that could help me better understand. So here goes..

Please look at the code beneath and tell me why, when I hit the save-button a second time after inserting a value into the first input field, the console keeps showing the statement "a value has been added..". The second time it should show "this input field has already been used.."

What I want my program to do is:

1. Tell me that a value has been added to a certain input field...

2. ...or tell me that the same input field has not been used yet...

3. ...or tell me that the same input field has already got a value earlier.

As you can see I set a yellow background-color to the input field after adding a value to it.

<!DOCTYPE html>
<html>
	<head>
		<style>
			input {
				width: 50px;
				height: 50px;
				font-size: 40px;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<input type="text">
		<input type="text">
		<input type="text">

		<button id="save">save</button>

		<script src="jquery-3.3.1.min.js"></script>

		<script>
			var input = $("input:first-child");

			$("#save").on("click", function() {
				if(input.val() != "" && input.css("background-color") != "rgb(255,255,0)") {
					console.log("a value has been added..");
					input.css("background-color","yellow");
				} else if(input.val() === "") {
					console.log("no value yet..");
				} else {
					console.log("this input field has already been used..");
				}
			});
		</script>
	</body>
</html>

dsonesuk · December 30, 2018

Although the rgb provides same colour, it's comparing text value for 'rgb(255,255,0)' to 'yellow' try using one or the other not both.

Edited December 30, 2018 by dsonesuk

Straw · December 30, 2018

Thank you dsonesuk...

Just minutes after I posted my last message: I GOT IT. When comparing color as a string you must use "rgb(xxx, xxx, xxx)". It does not work if you use "#ffff00" and it does not work if you use "yellow" either. And when you use "rgb(xxx, xxx, xxx)" make sure that you put a space after each comma otherwise it does not work either.

dsonesuk · December 31, 2018

On 12/30/2018 at 3:36 PM, Straw said:

And when you use "rgb(xxx, xxx, xxx)" make sure that you put a space after each comma otherwise it does not work either.

doesn't make difference if you have space or not as long as they are identical when required for comparing one to the other to find a match.

Straw · January 1, 2019

Well...who am I to argue but the thing is it really makes a difference. At least in the example am using. When am setting the background color it does not matter, I can even use "yellow" and it works. But when I use the comparison operator (!=), to check the background color it does not work if I do not use the spaces.

dsonesuk · January 2, 2019

OK! Javascript reads any format applied color i.e textual, hex, rgb as rgb. With spaces applied. It will also use single '0' instead of '000'. but It will accept no-spaces, spaces before and after comma's when applying rgb color format. I have never done it this way before, I generally use a class name that applies the background color then I can check against that existing, then you don't have to worry about what colour format it is or what colour.

Sign In

Problem with array

Recommended Posts

Straw

Link to comment

Share on other sites

justsomeguy

Link to comment

Share on other sites

Straw

Link to comment

Share on other sites

justsomeguy

Link to comment

Share on other sites

Straw

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

Straw

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

Straw

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity