# Learn Functional Programming by Building a Spreadsheet - Step 31

### Tell us what’s happening:

``````<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<body>
<div id="container">
<div></div>
</div>
<script src="./script.js"></script>
</body>
</html>
``````
``````/* file: styles.css */
#container {
display: grid;
grid-template-columns: 50px repeat(10, 200px);
grid-template-rows: repeat(11, 30px);
}

.label {
background-color: lightgray;
text-align: center;
vertical-align: middle;
line-height: 30px;
}
``````
``````/* file: script.js */
const isEven = num => num % 2 === 0;
const sum = nums => nums.reduce((acc, el) => acc + el, 0);
const average = nums => sum(nums) / nums.length;

const median = nums => {
const sorted = nums.slice().sort((a, b) => a - b);
const length = sorted.length;
const middle = length / 2 - 1;
return isEven(length)
? average([sorted[middle], sorted[middle + 1]])
: sorted[Math.ceil(middle)];
}

sum,
average,
median
}

const range = (start, end) => Array(end - start + 1).fill(start).map((element, index) => element + index);
const charRange = (start, end) => range(start.charCodeAt(0), end.charCodeAt(0)).map(code => String.fromCharCode(code));

const container = document.getElementById("container");
const createLabel = (name) => {
const label = document.createElement("div");
label.className = "label";
label.textContent = name;
container.appendChild(label);
}
const letters = charRange("A", "J");
letters.forEach(createLabel);
range(1, 99).forEach(number => {
createLabel(number);
letters.forEach(letter => {
const input = document.createElement("input");
input.type = "text";
input.id = letter + number;
input.ariaLabel = letter + number;
input.onchange = update;
container.appendChild(input);
})
})
}

// User Editable Region

const update = event => {
const element = event.target;
const value = element.value.replace(/\s/g, "");
if (element.id !== value) {};
}

console.log('something')

// User Editable Region

``````

User Agent is: `Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.1 Safari/605.1.15`

### Challenge Information:

Learn Functional Programming by Building a Spreadsheet - Step 31

1 Like

The instructions are giving you a big hint:

“…check if the `value` does not → include ← the `id` of the element.”

Do you know of a method that checks if a string is included in another string?

1 Like

It would be helpful if I could at least console log these variables and get some concrete detail about what I’m working with.

I have gotten console logs to print, but as far as I can tell I’m not working with arrays here, so includes doesn’t seem to be an option since its and array.prototype class.

This function is an event handler and is called when a specific event is triggered on an element. I believe in this case it is the change event on a text input in the spreadsheet. The event information (object) is passed into the function using the `event` parameter. That object contains a ton of information, including a pointer to the element it was called on. So you first set the `element` variable to that element using the `target` property. Then you got the value (string of text) that is in the input using the `value` property. So the `value` variable holds the string that is in the input. And you are correct, you can access the `id` value of the element using the `id` property. The `id` value is also a string.

So you have two strings, one stored in `value` and one stored in `element.id`. You want to check if the string in `value` does not include the string in `element.id`. I’ll give you a hint: MDN: String.prototype.includes(),

1 Like

Thank you! I confirmed what you wrote with console logs. I stepped away from Javascript for a few weeks and am rusty. I see there is a string method for includes. This allowed me to pass it.

You should use the includes() method
Here is the code : [Solution redacted]

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge.

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

1 Like

You’re right and I apology for it sincerlery