Nothing happens in my code though it could be correct - Html

AlexanderRise
February 13, 2023
134 views
3 votes
3 Answers

I’ve no clue what should I add or change in my code. This program is considered to output ‘correct’ when you text in current year ‘2023’ but I don’t get any errors or anything else. It just doesn’t work.
P.S it outputs ‘incorrect’ even if it’s true

const date = new Date();
const input = document.querySelector('.js-input').value;
const button = document.querySelector('.js-button');
const body = document.querySelector('body');

button.addEventListener('click', yearfunc);

function yearfunc(event) {
  if (input == date.getFullYear()) {
    const div = document.createElement('div');
    button.insertAdjacentElement('afterend', div);
    div.innerText = 'Correct';
  } else {
    const div = document.createElement('div');
    button.insertAdjacentElement('afterend', div);
    div.innerText = 'Incorrect';
  }
  event.preventDefault();
}

<p>What the year is it right now?</p><br><br>
<input type="text" class="js-input">
<button class="js-button">Send</button>

Tags: html javascript

Answers

The difference is that you assigned ‘.value’ too early in the code.
Assigning it directly in the function and comparing using a new variable solves the problem, try this out:

const date = new Date();
const input = document.querySelector(".js-input");
const button = document.querySelector(".js-button");

button.addEventListener("click", yearfunc);

function yearfunc(event) {
  const value = input.value;
  console.log(`VALUE: `, value);
  console.log(`YEAR: `, date.getFullYear());
  if (value == date.getFullYear()) {
    const div = document.createElement("div");
    button.insertAdjacentElement("afterend", div);
    div.innerText = "Correct";
  } else {
    const div = document.createElement("div");
    button.insertAdjacentElement("afterend", div);
    div.innerText = "Incorrect";
  }

  event.preventDefault();
}

<p>What year is it right now?</p>
<br /><br />
<input type="number" class="js-input" />
<button class="js-button">Send</button>

<script src="javascript.js"></script>

you Are retrieving the input outside of event so when the event actually occurs you are just comparing a pre-loaded value of "". Solution is to fetch the input data inside event handler:

// JavaScript code
const button = document.querySelector('.js-button');
const body = document.querySelector('body');
button.addEventListener('click', yearfunc);

function yearfunc(event) {
  const date = new Date();
  const input = document.querySelector('.js-input').value; 
    if(input == date.getFullYear()) {
        const div = document.createElement('div');
        button.insertAdjacentElement('afterend', div);
        div.innerText = 'Correct';
    }

    else {
        const div = document.createElement('div');
        button.insertAdjacentElement('afterend', div);
        div.innerText = 'Incorrect';
    }

    event.preventDefault();
}

This code should work. The way value was being taken from the ‘js-input’ class, was not giving the correct input value.

const date = new Date();
const input1 = document.getElementsByClassName("js-input");
const button = document.querySelector('.js-button');
const body = document.querySelector('body');

button.addEventListener('click', yearfunc);

function yearfunc(event) {
  console.log("in the function")
  console.log(input1[0].value)
  console.log(date.getFullYear())
    if(input1[0].value == String(date.getFullYear())) {
        const div = document.createElement('div');
        button.insertAdjacentElement('afterend', div);
        div.innerText = 'Correct';
    }

    else {
        const div = document.createElement('div');
        button.insertAdjacentElement('afterend', div);
        div.innerText = 'Incorrect';
    }

  event.preventDefault();
}

Please signup or login to give your own answer.

Click here to cancel reply.

Nothing happens in my code though it could be correct – Html

Answers