Welcome to Code Forum!

Join a community that supports you and your coding journey from day one. We strive to be a friendly, supportive community that empowers everyone to be better developers. By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.

    GIF shows where to locate </> in the thread and or post editor toolbar.
    To learn more about how to use our BBCode feature, review our "How to post your code into threads" here.

    Thank you, Code Forum.

Need help with website

R

Regy

Active Coder
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!

HTML: 
<!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>
 
Last edited by a moderator:
Sort by date Sort by votes
Okay I got the "if/else if" statements to work but now the "else" statement isn't working.
JavaScript: 
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....

JavaScript: 
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...

JavaScript: 
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?
 
Upvote 0 Downvote
Hi @Regy,
Have you tried checking the console for any errors?

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

JavaScript: 
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";}
Click to expand...
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.
 
Upvote 0 Downvote
Hi Johna.

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

JavaScript: 
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?
Click to expand...

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.
Click to expand...

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.
Click to expand...

Exactly.

Could it be that x is always "Item 1" so the condition is always true?
Click to expand...

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....

HTML: 
<!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"....
JavaScript: 
//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"....
JavaScript: 
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"....
Code: 
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"....
JavaScript: 
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 🙂
 
Upvote 0 Downvote
Well, thanks to our conversation and some help from Stackoverflow, I managed to cobble together some code and it seems to work...

HTML: 
<!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>
 
Upvote 0 Downvote
Regy said:
Well, thanks to our conversation and some help from Stackoverflow, I managed to cobble together some code and it seems to work...
Click to expand...
Alright, glad you got it working.

Regy said:
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.
Click to expand...
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.
 
Upvote 0 Downvote
Oh okay. I thought you were referring to illogical errors like this (where the "error" is that my message isn't being displayed)....

Code: 
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!
 
Upvote 0 Downvote
Regy said:
Oh okay. I thought you were referring to illogical errors like this (where the "error" is that my message isn't being displayed)....

Code: 
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!
Click to expand...
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
1690777867821.png
 
Upvote 0 Downvote

New Threads

Latest posts

Share this page

Buy us a coffee!

Buy me a coffee.
DataCamp Advertisement
Code Academy Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom