Jump to content
Straw

Problem with array

Recommended Posts

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>

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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>

 

Share this post


Link to post
Share on other sites

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 by dsonesuk

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...