Learn Functional Programming by Building a Spreadsheet - Step 31

Tell us what’s happening:

The code doesn’t work, although it should work.

“Now you need to check if the value does not include the id of the element. Create an if condition to do so.”
My solution:
if (!(value.toUpperCase().includes(element.id))) {}

I am absolutely sure that the code works, I checked it through the console. But the test fails.

I also tried the solution through RegExp, with the same “success”.
if (!(RegExp(\\b${element.id}\\b, ‘i’).test(value))) {}

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="./styles.css" />
    <title>Functional Programming Spreadsheet</title>
    <div id="container">
    <script src="./script.js"></script>
/* 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)];

const spreadsheetFunctions = {

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));

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

// User Editable Region

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

// User Editable Region

Your browser information:

User Agent is: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:125.0) Gecko/20100101 Firefox/125.0

Challenge Information:

Learn Functional Programming by Building a Spreadsheet - Step 31

Hi there and welcome to our community!

Why are you using toUpperCase() in this step?

HI! First I tried without uppercase, but it didnt work too.

if (!(value.includes(element.id))) {}

You have an unnecessary pair of parentheses immediately after the !. Remove that and its pair and your code should pass.

1 Like

It works, thanks a lot!

1 Like

I mean, the ids are uppercase.

I’m not sure if this check is ever explained or not. This might be a bug, or I just don’t understand the check.

I would guess the point is that you can call the functions on cell values, but not if the call contains the cell with the function call?

=sum(a1, a2) -> 20
=sum(a1, a3) -> undefined (and Potential infinite loop in console)

If you do use toUpperCase that doesn’t happen.

Edit: Can someone confirm that I’m not crazy and that this is a bug?

Because if it is, it should be fixed.

I opened an issue for it.

1 Like

In the process, I discovered another bug - if, for example, cell A3 contains a formula with A33, then the check will show an error, although such an expression is completely legal. In the topic, I proposed a solution through RegExp, which correctly deals with this case (and with Uppercase, too).
if (!(RegExp(`\\b${element.id}\\b`, ‘i’).test(value))) {}

Apparently, the point is that this is a simplified training example that does not claim to be complete.

Can you give an example of this? I don’t think I understand.

A3 = 10
A33 = =sum(1, a3) -> 11

A3 = =sum(1, a33) -> 11
A33 = 10

Well, that doesn’t mean the if statement logic from this step isn’t a bug that should be fixed.

A3 = =sum(1, a33) -> 11
A33 = 10

Right here - formula for A3 is correct, but the condition will show error (because cell value contains own id = “A3”)

But you said A3 and A33, I don’t get it?

I realize the function can’t contain its own cell reference, that is what this bug is about.

I wanted to point out that it is possible that the check that the formula contains a reference to itself may fail. But I may be complicating things too much.

let value = "=sum(1, A33)";  // Value in cell A3
if (!value.includes("A3")) {} // Will return false, meaning the cell contains its own reference. But it doesn't.
1 Like

i wonder if using the word boundary escaped character would work! I will bookmark this and go back to it on Monday

Oh, now I get what you are saying. That makes sense, includes would find “A3” in “A33” so the check wouldn’t work.

I have updated the issue to include this (no pun intended).