Check if word entered is correct

Question

I am creating a poem with blank lines. The blank must be changed and I have javascript created to check if the word that is entered is the correct word that should be in the poem.

Anyone know what I am doing wrong?

<body>
<pre id="poem">
Social Media
Relax yourself,
As I <span id = "word1" contenteditable>______</span>
through your mind
Scroll down the pages
of your spine
Reading every word 
and thought on
your <span contenteditable>____</span> like a <span contenteditable>____</span>
Stumbled Upon 
you then <span contenteditable>_______</span> onto
your looks--IGuess
I'm <span contenteditable>______</span> into you
You're my one
and only <span contenteditable>________</span>

Will you <span contenteditable>______</span> me?

</pre>
<button onsubmit = "isCorrect()"> submit </button>
<p color = "white" id = "demo"></p>

</body>

Javascript:

<script>
function isCorrect(){
    var word = document.getElementById("word1").value;
    if (word == "dig")
    {
        document.getElementById("demo").innerHTML = word;
    }
}
</script>

Please include the expected output and what you get instead. — Federico klez Culloca, Apr 19 '18 at 09:20
Also, why `onsubmit` and not simply `onclick` on that button? — Federico klez Culloca, Apr 19 '18 at 09:22
Your JS will only check the first blank of your input. Not the other blanks — Ahmad, Apr 19 '18 at 09:22
I would expect the paragraph with id = "demo" to then say the word that was entered if it is correct. Nothing happens though — StevenR, Apr 19 '18 at 09:23
First of all the submit event will never be fired since you are not using a form. — Cristian S., Apr 19 '18 at 09:24

gurvinder372 · Answer 1 · 2018-04-19T09:27:30.947

0

word1 is a span, use innerHTML instead of value. And I would recommend addEventListener instead of onsubmit.

document.querySelector( "button" ).addEventListener( "click", function(){
   isCorrect();
});
function isCorrect(){
    var word = document.getElementById("word1").innerHTML;
    if (word == "dig")
    {
        document.getElementById("demo").innerHTML = word;
    }
}

Similarly, you can check the values of other spans as well. I would recommend putting the values as the attribute of span itself, for example

As I <span id = "word1" data-value="dig" contenteditable>______</span>

And verify the same as

var allSpans = document.querySelectorAll( span[contenteditable] );
Array.from(allSpans).forEach( s => {
   var dataValue = s.getAttribute( "data-value" );
   if (dataValue == s.innerHTML )
   {
     //code for correct value
   }
})

edited Apr 19 '18 at 09:27

answered Apr 19 '18 at 09:22

gurvinder372

66,980
10
72
94

Why not outerHTML? – Gaterde Apr 19 '18 at 09:24
2

outerHTML will give `` as well – gurvinder372 Apr 19 '18 at 09:25
this doesnt work either – StevenR Apr 19 '18 at 09:25
@StevenR Instead of onsubmit, use onclick – gurvinder372 Apr 19 '18 at 09:25

Check if word entered is correct

1 Answers1