I have a question about Javascript itself ;'-(

[DiElDjiDLG]

Hi,

I have 2 questions. I’m new to JS and I try to understand the syntax and every term etc… Now I’ve arrived at the palindrome checker. I don’t want to copy the code from the example. But I try to read that code to understand it, so I can write it myself. Now I’ve stumbled across a thing I don’t understand. I can not understand what line of code defines “input”. Like how does “input” know that it has to be “userInput.value”. Because I don’t understand how this works. How does “input” know what it’s supposed to be. Please explain it to me, with as much words as you can . Also… Does someone have any good suggestions on how to understand the syntax of JS? Maybe websites or videos, or courses. Or how to know how everything is connected with eachother? Thank you in advance!!

const userInput = document.getElementById('text-input');
const checkPalindromeBtn = document.getElementById('check-btn');
const resultDiv = document.getElementById('result');

const checkForPalindrome = input => {
  const originalInput = input; // Store for later output

  if (input === '') {
    alert('Please input a value');
    return;
  }

  // Remove the previous result
  resultDiv.replaceChildren();

  const lowerCaseStr = input.replace(/[^A-Za-z0-9]/gi, '').toLowerCase();
  let resultMsg = `<strong>${originalInput}</strong> ${
    lowerCaseStr === [...lowerCaseStr].reverse().join('') ? 'is' : 'is not'
  } a palindrome.`;

  const pTag = document.createElement('p');
  pTag.className = 'user-input';
  pTag.innerHTML = resultMsg;
  resultDiv.appendChild(pTag);

  // Show the result.
  resultDiv.classList.remove('hidden');
};

checkPalindromeBtn.addEventListener('click', () => {
  checkForPalindrome(userInput.value);
  userInput.value = '';
});

userInput.addEventListener('keydown', e => {
  if (e.key === 'Enter') {
    checkForPalindrome(userInput.value);
    userInput.value = '';
  }
});

again this is not my code, this is from freeCodeCamp. But I want to understand some things. Thank you!

[pkdvalis]

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

[pkdvalis]

@DiElDjiDLG

const checkForPalindrome = input => {

The input variable is created here, in the function definition, as a parameter to be passed to this function.

When the function is called:

checkForPalindrome(userInput.value)

userInput.value becomes input within the function because it’s in thefunction definition.

[DiElDjiDLG]

Ahhhhh okay, thank you very much! I understand it right now, gonna try it out