Need help with website

[Regy]

I'm making a website and I'm coming across various issues. Some issues I can solve but (I have to concede) that with the other issues I have no idea what's causing the problem. Hence this thread.

My issue right now is that I simply can't get my If statements to work. They were working before. But then I tried doing a "if the user presses the Enter key, activate the button click function" thing using the code examples at....

W3Schools > Trigger Button Click on Enter

W3Schools > Trigger Button Click on Enter > Try it

And I thought I understood the code. But if that's the case then why aren't my If statements working?

Any help is appreciated!

<!DOCTYPE html>
<html>
<head>
    <style>
         h1 {font-size: 3em; text-align: center;}
         p {font-size: 1.2em; text-align: center;}
         #searchbox {display: block; font-size: 1.2em; margin: auto; width: 40%;}
         #searchbutton {display: block; margin: 0 auto; width: 5%;}
         #resultbox {font-size: 1.2em; display: block; margin: 0 auto; border: 1px solid; min-height: 20em; width: 40%; text-align: justify;}
    </style>
</head>
<body>
    <h1>Test</h1>
    <br>
    <input id="searchbox" type="text">
    <br><br>
    <button id="searchbutton" onclick="showreply()">Ok</button>
    <br><br>
    <p id="resultbox"></p>
    <script>
        var x = document.getElementById("searchbox");
        x.addEventListener("keypress", function(event) {
            if (event.key === "Enter") {
                event.preventDefault();
               document.getElementById("searchbutton").click();
           }
     });
     function showreply() {
         alert("Alert."); // Firefox shows 'Alert' which is good.
         var y = document.getElementById("searchbox");
         alert(y); // Firefox shows an alert window with... "[object HTMLInputElement]";
         if (y == "") { 
             document.getElementById("resultbox").innerHTML = "Please try again.";
             document.getElementById("searchbox").focus();
         } else if (y == "1") {
             document.getElementById("resultbox").innerHTML = "You entered " + x + ".";
         }
    }
</script>
</body>
</html>

 

[Regy]

Okay I got the "if/else if" statements to work but now the "else" statement isn't working.

function getvalue(el, dl){
if(el.value.trim() != ""){
var opSelected = dl.querySelector(`[value="${el.value}"]`);
var option = document.createElement("option");
option.value = opSelected.value;
option.text = opSelected.getAttribute("label");

  x = option.text;
  if (x == "Item 1"){document.getElementById("resultbox").innerHTML = x;}
  else {document.getElementById("resultbox").innerHTML = "No matches";}

}
else if(el.value.trim() == ""){document.getElementById("resultbox").innerHTML = "Empty searchbox.";}
}

I tried using 3 equal characters....

if (x === "Item 1"){document.getElementById("resultbox").innerHTML = x;}
else {document.getElementById("resultbox").innerHTML = "No matches";}

I tried using the "false" keyword with both 2 and 3 equal characters...

if (x == "Item 1"){document.getElementById("resultbox").innerHTML = x;}
else (x == false) {document.getElementById("resultbox").innerHTML = "No matches";}

if (x === "Item 1"){document.getElementById("resultbox").innerHTML = x;}
else if (x === false) {document.getElementById("resultbox").innerHTML = "No matches";}

The statements appear to be nested correctly. So what exactly am I missing?

 

[Johna]

Hi @Regy,
Have you tried checking the console for any errors?

I tried using the "false" keyword with both 2 and 3 equal characters...

if (x == "Item 1"){document.getElementById("resultbox").innerHTML = x;}
else (x == false) {document.getElementById("resultbox").innerHTML = "No matches";}

if (x === "Item 1"){document.getElementById("resultbox").innerHTML = x;}
else if (x === false) {document.getElementById("resultbox").innerHTML = "No matches";}

The else statement should not have any conditions. What's inside the else statement is what should happen if all of the if/else if conditions are false.

Could it be that x is always "Item 1" so the condition is always true? Try changing the condition and see if there's any difference.

 

[Regy]

Hi Johna.

Just before I get to your reply, I should mention there's a typo in the above code. This code...

else if (x === false) {document.getElementById("resultbox").innerHTML = "No matches";}

Shouldn't have an "if" in it. Oops! 🙂

Have you tried checking the console for any errors?

That's a 'no' from me because I don't know what errors I would check for. But I do have an update about this "Else" issue (see below) and if this update amounts to nothing then we can check for these mysterious errors you speak of.

The else statement should not have any conditions.

Yeah I thought as much. In hindsight those "else/condition" statements were a shot in the dark because I couldn't think of anything else to try and solve this problem.

What's inside the else statement is what should happen if all of the if/else if conditions are false.

Exactly.

Could it be that x is always "Item 1" so the condition is always true?

FYI that "x" is now a "y". Now to answer your question.... I don't believe so but (just in case I've missed something) here's my code....

<!DOCTYPE html>
<html><head><style>#myresults {border: 1px solid; min-height: 20em; width: 40%;}</style></head><body><h1>Test</h1>

<input id="mysearchbox" type="text" list="myitems">
<datalist id="myitems">
<option label="Item 1" value="Item 1"></option>
<option label="The 2nd item" value="The 2nd item"></option>
</datalist>
<br><br>
<button id="mybutton" type="button" onclick="getvalue(document.getElementById('mysearchbox'), document.getElementById('myitems'));">Click me</button>
<p id="myresults"></p>

<script>

var x = document.getElementById("mysearchbox");
x.addEventListener("keypress", function(event) {
if (event.key === "Enter") {
event.preventDefault();
document.getElementById("mybutton").click();
}
});

function getvalue(el, dl){
    if(el.value.trim() != ""){
    var opSelected = dl.querySelector(`[value="${el.value}"]`);
    var option = document.createElement("option");
    option.value = opSelected.value;
    option.text = opSelected.getAttribute("label");
    var y = option.text;
    
        if (y == "Item 1"){document.getElementById("myresults").innerHTML = "111";}
        else if (y == "The 2nd item"){document.getElementById("myresults").innerHTML = "222";}
        else {document.getElementById("myresults").innerHTML = "No matches";}
    }
    else if(el.value.trim() == ""){document.getElementById("myresults").innerHTML = "Empty search";}
}
</script></body></html>

Which brings me to my update. Here's what I discovered....

If I use this code and enter "Item 1"....

//if (y == "Item 1"){document.getElementById("myresults").innerHTML = "111";}
else if (y == "The 2nd item"){document.getElementById("myresults").innerHTML = "222";}

The else statement ("No matches") doesn't work. But this may be because an "if" statement doesn't precede the "else if" statement.

If I use this code and enter "The 2nd item"....

if (y == "Item 1"){document.getElementById("myresults").innerHTML = "111";}
//else if (y == "The 2nd item"){document.getElementById("myresults").innerHTML = "222";}

The else statement ("No matches") works.

And, just for the record, if I use this code and enter "abc"....

if (y == "Item 1"){document.getElementById("myresults").innerHTML = "111";}
else if (y == "The 2nd item"){document.getElementById("myresults").innerHTML = "222";}

The else statement ("No matches") doesn't work.

And then today you suggested that I change the condition...

If I use this code and enter "Item 1"....

if (y == "Item 100"){document.getElementById("myresults").innerHTML = "111";}
else if (y == "The 2nd item"){document.getElementById("myresults").innerHTML = "222";}

The else statement ("No matches") works.

I believe at this stage I say something about how frustrating this is and that I'm going to keep working on the problem. And I also believe that I should say...

Thanks for taking the time to look at my thread and helping me Johna, I appreciate it 🙂

 

[Regy]

Well, thanks to our conversation and some help from Stackoverflow, I managed to cobble together some code and it seems to work...

<!DOCTYPE html>
<html><head><style>#myresults {border: 1px solid; min-height: 20em; width: 40%;}</style></head><body><h1>Test</h1>

<form onsubmit="return false">
<input id="mysearchbox" type="text" list="myitems">
<datalist id="myitems">
<option label="Item 1" value="Item 1"></option>
<option label="The 2nd item" value="The 2nd item"></option>
</datalist>
<br><br>
<button id="mybutton" type="button" onclick="part1(document.getElementById('mysearchbox'), document.getElementById('myitems'));">Click me</button>
</form>
<p id="myresults"></p>
<script>

var x = document.getElementById("mysearchbox");
x.addEventListener("keypress", function(event) {
    if (event.key === "Enter") {
    event.preventDefault();
    document.getElementById("mybutton").click();
    }
});

function part1(){
if (part2('myitems', document.getElementById('mysearchbox').value)) {
y = (document.getElementById('mysearchbox').value);
    if (y == "Item 1")
    {document.getElementById("myresults").innerHTML = "111";}
    else if (y == "The 2nd item")
    {document.getElementById("myresults").innerHTML = "222";}
}
else {
    if (document.getElementById('mysearchbox').value.length == 0)
    {document.getElementById("myresults").innerHTML = "Empty search";}
    else if (document.getElementById('mysearchbox').value.length > 0)
    {document.getElementById("myresults").innerHTML = "No matches";}
    }
}

function part2(idDataList, inputValue) {
var option = document.querySelector("#" + idDataList + " option[value='" + inputValue + "']");
if (option != null) {return option.value.length > 0;}
return false;
}

</script></body></html>

 

[Johna]

Well, thanks to our conversation and some help from Stackoverflow, I managed to cobble together some code and it seems to work...

Alright, glad you got it working.

That's a 'no' from me because I don't know what errors I would check for. But I do have an update about this "Else" issue (see below) and if this update amounts to nothing then we can check for these mysterious errors you speak of.

If any code is not working as expected, the first thing you'll want to do is check the console for any errors. Often it could be something like a missing semicolon, closing bracket or other common syntax errors. The console will highlight the error, and should make finding/fixing the problem quicker and easier.

 

[Regy]

Oh okay. I thought you were referring to illogical errors like this (where the "error" is that my message isn't being displayed)....

x = 10
if x < 10 then
message "Hi."
end if

Yeah the console's good for error checking. It's a lot better than going crazy counting curly brackets (or whatever) and seeing if they all match up. So yeah good point.

Thanks again Johna!

 

[Antero360]

Oh okay. I thought you were referring to illogical errors like this (where the "error" is that my message isn't being displayed)....

x = 10
if x < 10 then
message "Hi."
end if

Yeah the console's good for error checking. It's a lot better than going crazy counting curly brackets (or whatever) and seeing if they all match up. So yeah good point.

Thanks again Johna!

Glad to see you're getting the hang of what we call "debugging hell" lol. But yes, to @Johna's point, first place you should look for if anything is not functioning properly is console. You don't necessarily have to know what errors you are looking for off hand

 

[Regy]

Yeah, great post, thanks.