1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Function help

Discussion in 'JavaScript' started by Web_Dev_Chris, Jul 7, 2019.

0
  1. #1
    Hi

    I would like to match the last character of the input field with the character at the same place in the word output in the HTML. If it does match do nothing and if it doesn’t match highlight he char in red so the user would know they have made a type miss match.

    I have successfully detected the incorrect char and managed to make it red. But then the trouble starts. It prints all this jibberish and I’m not sure what the issue is.

    Code below:
    <!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
<style>
.red{color:red;}
</style>
</head><body>
<!-- HTML -->
<p id="word-output">Hello World!</p>
<input id="input">
<script>
//Replace method
String.prototype.replaceAt=
   function(index,char){
      var a=this.split("");
      a[index] = char;
      return a.join("");
};
//DOM
var input = document.querySelector("#input");
var word_output = document.querySelector("#word-output");
var str = "Hello World!";
word_output.innerHTML = str;
//Compare the last input letter to the same position as the word output letter
input.addEventListener('input', ()=>{
if(
input.value.charAt(input.value.length-1)===
word_output.innerHTML.charAt(input.value.length-1)
)
{
console.log(true);
}
else if(
input.value.charAt(input.value.length-1)!==
word_output.innerHTML.charAt(input.value.length-1)
)
{
replaceChar();
};
function replaceChar(){
word_output.innerHTML =
word_output.innerHTML.replaceAt(input.value.length-1, '<span class="red">' + str.charAt(input.value.length-1) + '</span>');
};
});
</script>
</body></hmtl>
    HTML:
    Any help or insight would be greatly appreciated.
     
    Web_Dev_Chris, Jul 7, 2019 IP
  2. mmerlinn

    mmerlinn Prominent Member

    Messages:
    3,197
    Likes Received:
    818
    Best Answers:
    7
    Trophy Points:
    320
    #2
    Only thing that pops up for me, and not a big issue, is that you are testing for the same thing twice. Set your test to a variable outside of the IF statement, then use the variable in the IF construct. Less code, easier to follow, eliminates a potential bug, and may make your current bug easier to find.
     
    mmerlinn, Jul 7, 2019 IP
  3. Web_Dev_Chris

    Web_Dev_Chris Well-Known Member

    Messages:
    222
    Likes Received:
    12
    Best Answers:
    1
    Trophy Points:
    105
    #3
    Ok I’ll tidy up the code a bit and do some more digging.
     
    Web_Dev_Chris, Jul 7, 2019 IP
  4. Web_Dev_Chris

    Web_Dev_Chris Well-Known Member

    Messages:
    222
    Likes Received:
    12
    Best Answers:
    1
    Trophy Points:
    105
    #4
    I have managed to tidy up the code and matching the input char to the HTML char, character for character is working and firing off as true or false in the console. True for a match and false for a miss match.

    Now I just need to work out how to replace the mismatch in the HTML at that position. Which the position is the input.value.length-1 as I would need to replace it with the exact same char but have it wrapped in a span with a class to change the colour.

    <!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
<style>
.red{color:red;}
</style>
</head><body>
<!-- HTML -->
<p id="word-output">Hello World!</p>
<input id="input">
<script>
//DOM
var input = document.querySelector("#input");
var word_output = document.querySelector("#word-output");
var word_output_value = document.querySelector("#word-output").innerHTML;
var str = "Hello World!";
//Compare the last input letter to the same position as the word output letter
input.addEventListener('input', ()=>{
lastCharInput = input.value.charAt(input.value.length-1);
sameCharHTML = word_output.innerHTML.charAt(input.value.length-1);
if(lastCharInput===sameCharHTML){
console.log(true);
}else if(lastCharInput!==sameCharHTML){
console.log(false);
};
});
</script>
</body></hmtl>
    HTML:
     
    Web_Dev_Chris, Jul 7, 2019 IP
  5. mmerlinn

    mmerlinn Prominent Member

    Messages:
    3,197
    Likes Received:
    818
    Best Answers:
    7
    Trophy Points:
    320
    #5
    Much easier to read and follow.

    However, even with moving the variable outside of the IF construct you are still comparing twice.

    Simplify your code to something like this:

    if(x===y){
    dosomething
    }else{
    dosomething
    }
     
    mmerlinn, Jul 7, 2019 IP
  6. Web_Dev_Chris

    Web_Dev_Chris Well-Known Member

    Messages:
    222
    Likes Received:
    12
    Best Answers:
    1
    Trophy Points:
    105
    #6
    I guess the else if doesn’t need to be there.
     
    Web_Dev_Chris, Jul 7, 2019 IP
  7. mmerlinn

    mmerlinn Prominent Member

    Messages:
    3,197
    Likes Received:
    818
    Best Answers:
    7
    Trophy Points:
    320
    #7
    In a simple comparison like you have, true or false, all you need is just the ELSE.

    And if this is working correctly, then the next step is to find the original problem since it seems to be independent of this code.
     
    mmerlinn, Jul 7, 2019 IP
  8. mmerlinn

    mmerlinn Prominent Member

    Messages:
    3,197
    Likes Received:
    818
    Best Answers:
    7
    Trophy Points:
    320
    #8
    It appears that 'replaceAT' is not a valid JS method. Change to 'replace' and try that.
     
    mmerlinn, Jul 7, 2019 IP