Javascript Help (If and If/Else Statemtents)?

Question

0.00/5 (No votes)

See more:

Before I begin, I am a beginner at coding, so I will take any and all critism/suggestions.

I'm trying to create a code that places a pin on a given location on the globe. I already know how to place the marker on the globe. I just need to figure out how to create a textbox where users can type in a location and it will add a pin. For some reason, no matter what I type into the textbox, the program places a pin on the first location: Adelaide. If you could help me figure out what I'm doing wrong, it would be greatly appreciated.

Here is the code:

XML

<br><center><p><font face = "forte"><font size="6"><font color="cyan">Add a Pin</font></p>
<input type="text" id="textinput">
<input type="button" value="Add" onclick="addPin()"><br>

<script type="text/javascript">
    function addPin()
    {
        var textinput = document.getElementById("textinput").value;
        if (textinput=="Adelaide" || "Adelaide, Australia" || "Adelaide Australia" || "Adelaide, South Australia, Australia")
            {
            document.getElementById("disptext").innerHTML = ("<font color='cyan'><font size='3'>Pin addded onto Adelaide, South Australia, Australia!</font>");
            var marker = WE.marker([-34.55, 138.36]).addTo(earth);
            marker.bindPopup("<b>Adelaide</b><br>Australia", {maxWidth: 120, closeButton: true});
            }
        else if (textinput=="Amsterdam" || "Amsterdam, Netherlands" || "Amsterdam Netherlands" || "Amsterdam, the Netherlands" || "Amsterdam the Netherlands")
            {
            document.getElementById("disptext").innerHTML = ("<font color='cyan'><font size='3'>Pin addded onto Amsterdam, Netherlands!</font>");
            var marker = WE.marker([52.22, 4.53]).addTo(earth);
            marker.bindPopup("<b>Amsterdam</b><br>Netherlands", {maxWidth: 120, closeButton: true});
            }
        else
            {
            document.getElementById("disptext").innerHTML = "<font color='red'><font size='3'>Sorry, there was an error.</font>"}
    }
</script>

<p id="disptext"></p>

</head>

             <script src="http://www.webglearth.com/v2/api.js"></script>
       <script>
          var earth;
          function initialize() {
          earth = new WE.map('earth_div');
          earth.setView([20, 3], 3);
          WE.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
          }).addTo(earth);


          var before = null;
          requestAnimationFrame(function animate(now) {
            var c = earth.getPosition();
            var elapsed = before? now - before: 0;
            before = now;
            earth.setCenter([c[0], c[1] + 0.1*(elapsed/15)]);
            requestAnimationFrame(animate);
          });
          }
        </script>
        <style>
        html, body{padding: 0; margin: 0;}
        #earth_div{top: 0; right: 0; bottom: 0; left: 0;}
        </style>
        </head>
        <body onload="initialize()">
        <div id="earth_div"></div>
    </div>

Posted 5-Jul-15 10:16am

Member 11814944

Add a Solution

Comments

Afzaal Ahmad Zeeshan 5-Jul-15 19:55pm

I have provided solution to your problem; in a very compact way. You can read my Solution 1 and provide your feedback. Good luck! :)

Also, since you are a beginner, I would suggest that you learn the programming language's structure and syntax.

Member 11814944 6-Jul-15 8:26am

Thank you so much!!! I tried the code and it worked out perfectly. I can't thank you enough.

Mohibur Rashid 5-Jul-15 20:01pm

Your first if statement is always true. Value othet than 0 or null is always true. You wrote
if (textinput=="Adelaide" || "Adelaide, Australia" || "Adelaide Australia" || "Adelaide, South Australia, Australia")

textinput=="Adelaide", whether this statement true or false depends on textinput variable. But, "Adelaide Australia" is always true. So do rhe others.

Try
If (textinput=="Adelaide" || textinput=="Adelaide, Australia" || textinput=="Adelaide Australia" || textinput=="Adelaide, South Australia, Australia")

I didnt read your entire code.

Member 11814944 6-Jul-15 8:27am

It worked, thank you!

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Afzaal Ahmad Zeeshan · Accepted Answer · 2015-07-05T13:54:00

Because that is not how if...else block works. An if else block (with complex expressions) requires you to use AND operator (which you are) along with different expressions or variable or statements that resolve to boolean value (true or false). Your code does not follow the guidelines.

I will take the first conditional block, and explain what went wrong there.

JavaScript

if (textinput=="Adelaide" || "Adelaide, Australia" || "Adelaide Australia" || "Adelaide, South Australia, Australia")

Now in the above code block, you are using only one expression to determine the value. Rest of the expressions (literals) are just literals, however the OP operators, constant literals and this expression... They make your first expression to be true, always[^].

A solution to this is that you change your literals into same expression to check whether they are the values or not.

JavaScript

if (textinput=="Adelaide" || // One 
    textinput=="Adelaide, Australia" || // condition
    textinput=="Adelaide Australia" || // at a 
    textinput=="Adelaide, South Australia, Australia") // time!

Now if you would run this code, you would find out that the code indeed works. If there is a match, it would show the results; true. Otherwise it would resolve to be false and the code would move to next stage; false. Go to this JSFiddle to see a live example of this[^].

Listen, we are not here to criticize, but to help. Our answers depend on your question; ask a good question to get a good answer, ask stupid question to get a stupid response.