Displaying an array values in a block and not in-line

HTML & CSS
1

Hello guys!
So I tried to display an array values in a <div> and I don’t know how to make it display in blocks and not in-line.
the result is : XXXX, XXXX, XXXX

and I want it to be:
XXXX
XXXX
XXXX

Hope you can help, thank you!(:

html:

<input id="button-1" type="button" value="get me something to eat" onClick="showResturant('city');">
    <br>
    <br>
    <div id="resturants">resturants</div>

javascript:

var resListRa = ["tabun", "pizza"];
var resListTa = ["pizza", "chicken"];

function showResturant(city) {

  var city = document.getElementById("cityInput").value.toLowerCase();

  switch(city) {

    case "new york":
    document.getElementById("resturants").innerHTML = resListNy;
    break;

    case "los angeles":
    document.getElementById("resturants").innerHTML = resListLa;
    break;

    default :
    alert("please insert viled city");
  }
}
2

Hi there artium1,

and a warm welcome to these forums. :sunglasses:

Here is one possible solution…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
body {
    background-color: #f0f0f0;
    font: 1em/150% verdana, arial, helvetica, sans-serif;
    text-align: center;
 }

#container,  #resturants {
    display:inline-block;
    padding: 2em;
    margin: 2em 0;
    border: 0.062em solid #999;
    border-radius: 0.5em;
    background-color: #fff;
    box-shadow: 0.4em 0.4em 0.4em #999;
 }

#city {
    display: block;    
 }

#resturants  {
    margin: 1em 0 0;
    background-color: #fcfcfc;
    box-shadow: none;
 }

#city, #resturants span {
    display: block;
    margin: 0.5em 0;    
 }

#item0 {
    font-weight: bold;
    color: #666;
    text-decoration: underline;
 }
</style>

</head>
<body> 

<div id="container">

 <select id="city">
  <option value="">get me something to eat</option>
  <option value="New York">New York</option>
  <option value="Los Angeles">Los Angeles</option>
 </select>

 <div id="resturants">
  <span id="item0">Resturants</span> 
  <span id="item1"></span>
  <span id="item2"></span>
 </div>

</div>

<script>
(function( d ) {
   'use strict';

   var resListNy = [ 'tabun', 'pizza' ],
       resListLa = [ 'pizza', 'chicken' ],
       itm0 = d.getElementById( 'item0' ),
       itm1 = d.getElementById( 'item1' ),
       itm2 = d.getElementById( 'item2' );

   d.getElementById('city').addEventListener('change', function(){
        itm0.removeChild( itm0.childNodes[ 0 ] );
   if ( itm1.childNodes[ 0 ] ){
        itm1.removeChild( itm1.childNodes[ 0 ] );
        itm2.removeChild( itm2.childNodes[ 0 ] );
      }

      switch( this.value ) {
      case 'New York':
        itm0.appendChild( d.createTextNode( this.value ) );
        itm1.appendChild( d.createTextNode( resListNy[ 0 ] ) );
        itm2.appendChild( d.createTextNode( resListNy[ 1 ] ) );
      break;

      case 'Los Angeles':
        itm0.appendChild( d.createTextNode( this.value ) );
        itm1.appendChild( d.createTextNode( resListLa[ 0 ] ) );
        itm2.appendChild( d.createTextNode( resListLa[ 1 ] ) );
      break;

      default :
        itm0.appendChild( d.createTextNode( 'Resturants' ) );      
    }
   }, false );
}( document ));
</script>

</body>
</html>

coothead

3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.