• 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.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

JavaScript [Question] Script not working need assistance, Matching Array with Input

Cokslam

New Coder
Hello Guys, im new to HTML CSS and Javascript

I'm trying to make a search bar input to answer question based on City Area Covered in array i already prepare,
then i want to make the javascipt to produce different result when searched based on the matching input data with array

i'm trying this logic

if the user input same like array = changing display style of text " area covered" from none to block
if the user input empty = changing display stlye of text " please fill the input" from none to block
if the user input not the same = changing display style of text "area not covered" from none to block

could anyone help me with this?
Thank Youu

CSS code :
CSS:
.HeadlineSearchContainer
{
  position : relative;
  top : 100px;
  margin: auto;
  width : 50%;
  height : 159px;
  border-left: solid white 1px;
}
.SearchCharacterStyle
{
  font-family : Roboto;
  font-size : 12px;
  line-height : 24.82px;
  color : #FFFFFF;
  color : rgb(255, 255, 255);
  text-align: left;
  padding-left: 20px;
}
.searchrespond
{
    font-family : Roboto;
    font-size : 12px;
    line-height : 24.82px;
    color : #FFFFFF;
    color : rgb(255, 255, 255);
    text-align: left;
    padding-left: 20px;
}
#areaCovered
        {
    display: none;
        }
#areaNotCovered
        {
    display: none;
        }
#fillArea
        {
    display: none;
        }

HTML :
HTML:
<div class="HeadlineSearchContainer">
              <div class="SearchCharacterStyle">
                          <h>SEARCH FOR AREA COVERANGE</h>
                      </div>
                      <div id="mySearch" class="searchbox_box">
                        <form autocomplete="off" name="myForm">
                        <div class="autocomplete" style="width:300px;">
                        <input id="myInput" type="text" name="city" placeholder="Enter Your Destination City">
                        <i class="searchbutton"></i>
                        </div>
                        <input type="button" formtarget="_new" onclick="searchRespond()" name="input" value="Search">
                        <div class="searchrespond" id="searchRespond">
                            <h id="areaCovered" >YES! We cover your area destination</h>
                            <h id="areaNotCovered" >We don't cover your area destination yet <p id="searchResult"></p></h>
                            <h id="fillArea" >Please fill your area destination first</h>
                        </div>
                        </form>
                        </div>
            </div>

JavaScript:
    function searchRespond()
                            {
                            /*Input value = Array countries     */                             
                            if (document.getElementById("myInput").value.match(countries))
                            /*change area covered display style to block*/
                            {
                                document.getElementById("areaCovered").style.display ="block";
                            }
                            /*if the input empty change style display fillArea display style to block*/
                                else if (document.getElementById("myInput").value = "")
                                
                                {
                                    document.getElementById("fillArea").style.display ="block";
                                }
                                /*otherwise change style display areaNotCoverd display style to block*/
                                else
                                {
                                    document.getElementById("areaNotCovered").style.display ="block";
                                    document.getElementById("searchResult").innerHTML = document.getElementById("myInput").value;
                                    
                                     }
                     
                            }
  var countries = ["Afghanistan","Albania","Algeria","Andorra","Angola","Anguilla","Antigua & Barbuda","Argentina","Armenia","Aruba","Australia","Austria","Azerbaijan","Bahamas","Bahrain","Bangladesh","Barbados","Belarus","Belgium","Belize","Benin","Bermuda","Bhutan","Bolivia","Bosnia & Herzegovina","Botswana","Brazil","British Virgin Islands","Brunei","Bulgaria","Burkina Faso","Burundi","Cambodia","Cameroon","Canada","Cape Verde","Cayman Islands","Central Arfrican Republic","Chad","Chile","China","Colombia","Congo","Cook Islands","Costa Rica","Cote D Ivoire","Croatia","Cuba","Curacao","Cyprus","Czech Republic","Denmark","Djibouti","Dominica","Dominican Republic","Ecuador","Egypt","El Salvador","Equatorial Guinea","Eritrea","Estonia","Ethiopia","Falkland Islands","Faroe Islands","Fiji","Finland","France","French Polynesia","French West Indies","Gabon","Gambia","Georgia","Germany","Ghana","Gibraltar","Greece","Greenland","Grenada","Guam","Guatemala","Guernsey","Guinea","Guinea Bissau","Guyana","Haiti","Honduras","Hong Kong","Hungary","Iceland","India","Indonesia","Iran","Iraq","Ireland","Isle of Man","Israel","Italy","Jamaica","Japan","Jersey","Jordan","Kazakhstan","Kenya","Kiribati","Kosovo","Kuwait","Kyrgyzstan","Laos","Latvia","Lebanon","Lesotho","Liberia","Libya","Liechtenstein","Lithuania","Luxembourg","Macau","Macedonia","Madagascar","Malawi","Malaysia","Maldives","Mali","Malta","Marshall Islands","Mauritania","Mauritius","Mexico","Micronesia","Moldova","Monaco","Mongolia","Montenegro","Montserrat","Morocco","Mozambique","Myanmar","Namibia","Nauro","Nepal","Netherlands","Netherlands Antilles","New Caledonia","New Zealand","Nicaragua","Niger","Nigeria","North Korea","Norway","Oman","Pakistan","Palau","Palestine","Panama","Papua New Guinea","Paraguay","Peru","Philippines","Poland","Portugal","Puerto Rico","Qatar","Reunion","Romania","Russia","Rwanda","Saint Pierre & Miquelon","Samoa","San Marino","Sao Tome and Principe","Saudi Arabia","Senegal","Serbia","Seychelles","Sierra Leone","Singapore","Slovakia","Slovenia","Solomon Islands","Somalia","South Africa","South Korea","South Sudan","Spain","Sri Lanka","St Kitts & Nevis","St Lucia","St Vincent","Sudan","Suriname","Swaziland","Sweden","Switzerland","Syria","Taiwan","Tajikistan","Tanzania","Thailand","Timor L'Este","Togo","Tonga","Trinidad & Tobago","Tunisia","Turkey","Turkmenistan","Turks & Caicos","Tuvalu","Uganda","Ukraine","United Arab Emirates","United Kingdom","United States of America","Uruguay","Uzbekistan","Vanuatu","Vatican City","Venezuela","Vietnam","Virgin Islands (US)","Yemen","Zambia","Zimbabwe"];

the result always showing area not covered falue.
 
First of all some general recommendations.

1) Post your complete page in one HTML block instead of separate HTMP/CSS/JavaScript blocks (cool as that looks), so someone can copy that in a file and run your code without having to piece things together first. Don't worry, we can see what is where 😁

2) Please clean up your indentation in the HTML. It looks horribly random, making it hard to see the structure. Matching tags like <div> and </div> should line up. Get in a habit to write clean and neatly laid out code, believe me it really pays off (especially when someone else needs to look at it).

3) Also please run your code (the complete html) through a validator like this one https://validator.w3.org/ to spot some obvious errors.

Now I can see you have been experimenting a lot here... it's rather a mess not to put too fine a point on it, sorry. It would be far quicker to rewrite the whole thing than to explain all the errors... but I'l try.

if (document.getElementById("myInput").value.match(countries))
This is always going to be false. Please look up the definition of match and realize your mistake. You need to find out if your input string is in the array countries. It should be if ( countries.includes(document.getElementById("myInput").value )

<i class="searchbutton"></i>
What's this ? There is no such thing as a HTML element <i>, and you have no definition for class searchbutton. Make it a habit to remove experimental stuff if it does not work or al least improve something.

<h id="areaCovered" >YES! We cover your area destination</h> <h id="areaNotCovered" >We don't cover your area destination yet <p id="searchResult"></p></h> <h id="fillArea" >Please fill your area destination first</h>
Not sure how you expect these to work ? There is no such thing as a HTML element <h> , and I am surprised that getElementById() even finds these buggers ! I would recommend using <span>...</span> instead. Personally I would use one element, and fill that with text from JavaScript, rather than juggle with the styles of 3 separate elements.

You are using a <form> for no good reason. A form is a collection of input fields and a submit button, so you can send data to another page. Remote the form and make your button a normal button.

I'm not sure if I spotted all the errors, but see if you can address these points first and we'll take it from there.
 
Top Bottom