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 :
HTML :
the result always showing area not covered falue.
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.