Solution 1 :

The var word is p tag, so you need to get the inner text of it and compare it with the input text. Also, when replacing it, access the text() property of it. See below. main() is commented out here, but you can keep as per the need.

function textVerify(item) {

  var word = document.getElementById(($('#questionNumber').text() + 'a'));

  if (item.value.toUpperCase() === $(word).text().toUpperCase()) {
    item.style.color = "green";
    $(item).replaceWith("<div style='color:green;'>" + $(word).text() + "</div>");
    //main()
  } else {
    item.style.color = "black";
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<span class="ihide" id="questionNumber">1</span>
<p id="1a" class="ihide">Seven</p>
<input id="1" name="Seven" type="text" value="" onkeyup="textVerify(this)" autofocus="">

Solution 2 :

In your code ($('#questionNumber').text()+'a') this part returns just ‘a’, as text of the id questionNumber is nothing.

And in your HTML there is no such id. I think you need to make this changes to your HTML code:

<span class="ihide" id="questionNumber">1</span>

This should work.

EDIT: Also, can you please share the JS code associated with ‘item’, there can be an error in that part too.

Problem :

I am trying to get the element with the ID 1a, 2a, 3a etc. according to whenever the function is run.

It then compares that elements value (using jQuery) with the value of the input where the function is wrong
It brings up an error saying:

TypeError: var1.toUpperCase is not a function. (in ‘var2.toUpperCase()’,’var1.toUpperCase’ is undefined)

Any help would be appreciated.
Thanks
(UPDATE usually there would be text in questionNumber like: 1, 2, 3 etc every time the another function is run.)


EDIT: Every time a different function is run, questionNumber is increased by 1. I save questionNumber‘s text in a variable called word. I then add the letter a to that variable. Then, I get the element that has ID of the variable word, then compare it’s contents to the value of the input, but the comparison is uppercase to avoid problems. If they are equal, the input is replaced with a div with green text. Hope this makes it clearer.

      function textVerify(item) {
          var word= document.getElementById(($('#questionNumber').text()+'a'));
      if (item.value.toUpperCase() === word.toUpperCase()){
          item.style.color = "green";
          $( item ).replaceWith( "<div style='color:green;'>"+word+"</div>" );
          main()
          } else {
              item.style.color = "black";
        }
          <span class="ihide" id="questionNumber"></span>
          <p id="1a" class="ihide">Seven</p>
          <input id="1" name="Seven" type="text" value="" onkeyup="textVerify(this)" autofocus="">

Comments

Comment posted by Pirate

What text do you have in

Comment posted by Pirate

please add full javascript and explain what you’re trying to achieve. What should happen when?

Comment posted by Jen

what is main()? And does the solution have to be in jquery or is vanilla js ok?

Comment posted by answer below

@TheHTMLCODERjs i’ve modified your code a little and fix the issue. Please check my

Comment posted by srinath-nanduri

I’m sorry to point it out, but can someone please explain where am I wrong? @Pirate can you? I am a bit confused.

Comment posted by Pirate

you’re partially right about the text being empty by looking at the html. I had the same doubt, but op said it will be populated by JavaScript,so there will actually be something. Ultimately, that code will return 1a, 2a and so on. However, it will still not work because of few incorrect use of JavaScript and jquery methods. Check my answer for fix in js function op has. It’s working there.

Comment posted by srinath-nanduri

Oh ok, thanks for clarifying, got your point @Pirate.

By