I want to put a link that adds what you pressed into an array If I say console.log(Array) it will return "undefined" as a string

Question

Just some background information so you don't get confused. I am trying to build a restaurant website with dropdown menus. It is NOT DONE so there might be some more errors. Anyway, only one link is done if you run this code. If I click the link it is supposed to return the array onto the console. Here is my code, please tell me if there is something wrong!

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.container-fluid{
    text-align:center;
}
.dropdown{
    float:left;
    margin: 5px;
    text-align: center;
}
button{
    width: 322px;
    border-radius:0px;
    color:black;
}
*{
    text-align: center;
}
a{
    text-decoration: none;
}
</style>
<title>Daddy Always Hungry</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.cs">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
</head>

<body>
<div class="container-fluid">
    <br>
    <br />

    <div class="dropdown">
        <button class="dropbtn" onclick="appShow();" id="inline">Appetizers
            <i class="fa fa-caret-down"></i>
        </button>
        <div class="dropdown-content" id="myDropdown">
            <a href="javascript:void(0)" title="Click Here to Add to Order" onclick="addOrder(document.getElementById('link1').value);">
                <h4 id="link1">French Fries</h4>
            </a>
            <h4 id="link2">Nachos(Guacamole, Cheese, or Salsa)</h4>
            <h4 id="link3">Mozzarella Sticks</h4>
            <h4 id="link13">Vegan Pot Stickers</h4>
            <h4 id="link14">
                <u>Breadsticks</u>
            </h4>
            <h4 id="link15">Cheese Breadsticks</h4>
            <h4 id="link16">Garlic Breadsticks</h4>
        </div>
    </div> 
    <!-- 
   ______________________________________________________________________-->
    <div class="dropdown">
        <button class="dropbtn" onclick="courseShow();" id="inline2">Main Courses
            <i class="fa fa-caret-down"></i>
        </button>
        <div class="dropdown-content" id="myDropdown">
            <h4 id="link4">Link 1</h4>
            <h4 id="link5">Link 2</h4>
            <h4 id="link6">Link 3</h4>
        </div>
    </div>


    <div class="dropdown">
        <button class="dropbtn" onclick="dessertShow();" id="inline3">Desserts
            <i class="fa fa-caret-down"></i>
        </button>
        <div class="dropdown-content" id="myDropdown">
            <h4 id="link7">Link 1</h4>
            <h4 id="link8">Link 2</h4>
            <h4 id="link9">Link 3</h4>
        </div>
    </div>

    <div class="dropdown">
        <button class="dropbtn" onclick="drinkShow();" id="inline3">Drinks
            <i class="fa fa-caret-down"></i>
        </button>
        <div class="dropdown-content" id="myDropdown">
            <h4 id="link10">Link 1</h4>
            <h4 id="link11">Link 2</h4>
            <h4 id="link12">Link 3</h4>
        </div>
    </div>

    <script type="text/javascript">
        var link1=document.getElementById('link1');
        var link2=document.getElementById('link2');
        var link3=document.getElementById('link3');
        var link4=document.getElementById('link4');
        var link5=document.getElementById('link5');
        var link6=document.getElementById('link6');
        var link7=document.getElementById('link7');
        var link8=document.getElementById('link8');
        var link9=document.getElementById('link9');
        var link10=document.getElementById('link10');
        var link11=document.getElementById('link11');
        var link12=document.getElementById('link12');
        var link13=document.getElementById('link13');
        var link14=document.getElementById('link14');
        var link15=document.getElementById('link15');
        var link16=document.getElementById('link16');
        link1.style.display = "none";
        link2.style.display = "none";
        link3.style.display = "none";
        link4.style.display = "none";
        link5.style.display = "none";
        link6.style.display = "none";
        link7.style.display = "none";
        link8.style.display = "none";
        link9.style.display = "none";
        link10.style.display = "none";
        link11.style.display = "none";
        link12.style.display = "none";
        link13.style.display = "none";
        link14.style.display = "none";
        link15.style.display = "none";
        link16.style.display = "none";
        var order=[

        ]
        function appShow() {
            link1.classList.toggle("show");
            link2.classList.toggle("show");
            link3.classList.toggle("show");
            link13.classList.toggle("show");
            link14.classList.toggle("show");
            link15.classList.toggle("show");
            link16.classList.toggle("show");
        }
        function courseShow(){
            link4.classList.toggle("show");
            link5.classList.toggle("show");
            link6.classList.toggle("show");
        }
        function dessertShow(){
            link7.classList.toggle("show");
            link8.classList.toggle("show");
            link9.classList.toggle("show");
        }
        function drinkShow(){
            link10.classList.toggle("show");
            link11.classList.toggle("show");
            link12.classList.toggle("show");
        }
        function addOrder(item){
            order.push(String(item));
            console.log(order);
        }
    </script>
</body>
</html>

anchor elements do not have values. – epascarello Dec 28 '17 at 02:14 — epascarello, Dec 28 '17 at 02:14
your code doesn't even show the dropdowns, so ... – Jaromanda X Dec 28 '17 at 02:15 — Jaromanda X, Dec 28 '17 at 02:15

score 1 · Answer 1 · answered Dec 28 '17 at 02:15

H4 selector isn't an input data form to get the value or text. To get the content of any selector from HTML using JavaScript you've to use innerHTML or textContent.

.value() - for selectors like input, button, textarea
.innerHTML - for selectors like div, h1-h6, label... (not data forms like input,select)
.textContent - if you'll use (&), (<), or (>) inside selectors then use textContent to parse them correctly

<!DOCTYPE html>
<html>

<head>
    <style type="text/css">
        .container-fluid {
            text-align: center;
        }

        .dropdown {
            float: left;
            margin: 5px;
            text-align: center;
        }

        button {
            width: 322px;
            border-radius: 0px;
            color: black;
        }

        * {
            text-align: center;
        }

        a {
            text-decoration: none;
        }
    </style>
    <title>Daddy Always Hungry</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js">
    </script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
    </script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8">
</head>

<body>
    <div class="container-fluid">
        <br>
        <br />

        <div class="dropdown">
            <button class="dropbtn" onclick="appShow();" id="inline">Appetizers
                <i class="fa fa-caret-down"></i>
            </button>
            <div class="dropdown-content" id="myDropdown">
                <a href="javascript:void(0)" title="Click Here to Add to Order" onclick="addOrder(document.getElementById('link1').innerHTML);">
                    <h4 id="link1">French Fries</h4>
                </a>
                <h4 id="link2">Nachos(Guacamole, Cheese, or Salsa)</h4>
                <h4 id="link3">Mozzarella Sticks</h4>
                <h4 id="link13">Vegan Pot Stickers</h4>
                <h4 id="link14">
                    <u>Breadsticks</u>
                </h4>
                <h4 id="link15">Cheese Breadsticks</h4>
                <h4 id="link16">Garlic Breadsticks</h4>
            </div>
        </div>



        <!-- 
   ______________________________________________________________________-->
        <div class="dropdown">
            <button class="dropbtn" onclick="courseShow();" id="inline2">Main Courses
                <i class="fa fa-caret-down"></i>
            </button>
            <div class="dropdown-content" id="myDropdown">
                <h4 id="link4">Link 1</h4>
                <h4 id="link5">Link 2</h4>
                <h4 id="link6">Link 3</h4>
            </div>
        </div>


        <div class="dropdown">
            <button class="dropbtn" onclick="dessertShow();" id="inline3">Desserts
                <i class="fa fa-caret-down"></i>
            </button>
            <div class="dropdown-content" id="myDropdown">
                <h4 id="link7">Link 1</h4>
                <h4 id="link8">Link 2</h4>
                <h4 id="link9">Link 3</h4>
            </div>
        </div>

        <div class="dropdown">
            <button class="dropbtn" onclick="drinkShow();" id="inline3">Drinks
                <i class="fa fa-caret-down"></i>
            </button>
            <div class="dropdown-content" id="myDropdown">
                <h4 id="link10">Link 1</h4>
                <h4 id="link11">Link 2</h4>
                <h4 id="link12">Link 3</h4>
            </div>
        </div>


        <script type="text/javascript">
            var link1 = document.getElementById('link1');
            var link2 = document.getElementById('link2');
            var link3 = document.getElementById('link3');
            var link4 = document.getElementById('link4');
            var link5 = document.getElementById('link5');
            var link6 = document.getElementById('link6');
            var link7 = document.getElementById('link7');
            var link8 = document.getElementById('link8');
            var link9 = document.getElementById('link9');
            var link10 = document.getElementById('link10');
            var link11 = document.getElementById('link11');
            var link12 = document.getElementById('link12');
            var link13 = document.getElementById('link13');
            var link14 = document.getElementById('link14');
            var link15 = document.getElementById('link15');
            var link16 = document.getElementById('link16');
            link1.style.display = "none";
            link2.style.display = "none";
            link3.style.display = "none";
            link4.style.display = "none";
            link5.style.display = "none";
            link6.style.display = "none";
            link7.style.display = "none";
            link8.style.display = "none";
            link9.style.display = "none";
            link10.style.display = "none";
            link11.style.display = "none";
            link12.style.display = "none";
            link13.style.display = "none";
            link14.style.display = "none";
            link15.style.display = "none";
            link16.style.display = "none";
            var order = [

            ]

            function appShow() {
                link1.classList.toggle("show");
                link2.classList.toggle("show");
                link3.classList.toggle("show");
                link13.classList.toggle("show");
                link14.classList.toggle("show");
                link15.classList.toggle("show");
                link16.classList.toggle("show");
            }

            function courseShow() {
                link4.classList.toggle("show");
                link5.classList.toggle("show");
                link6.classList.toggle("show");
            }

            function dessertShow() {
                link7.classList.toggle("show");
                link8.classList.toggle("show");
                link9.classList.toggle("show");
            }

            function drinkShow() {
                link10.classList.toggle("show");
                link11.classList.toggle("show");
                link12.classList.toggle("show");
            }

            function addOrder(item) {
                order.push(item);
                console.log(order);
            }
        </script>
</body>

</html>

Here is the working copy of your example.

Ken Y-N · Accepted Answer · 2017-12-28T02:22:17.020

0

Assuming you are asking why this doesn't work:

<a href="javascript:void(0)" title="Click Here to Add to Order" 
       onclick="addOrder(document.getElementById('link1').value);">
<h4 id="link1">French Fries</h4>

The problem is that value is actually an attribute, so you would have to say something like:

<h4 id="link1" value="French Fries">French Fries</h4>

EXCEPT that value is not an allowed attribute here, so this won't work. What you really want to do is get the text in between the <h4>...</h4>, which can be done by, for example:

<a href="javascript:void(0)" title="Click Here to Add to Order" 
       onclick="addOrder(document.getElementById('link1').textContent);">

See the official documentation for more info.

UPDATE: Since you have jQuery there, you can simplify this down to:

<a href="javascript:void(0)" title="Click Here to Add to Order" 
       onclick="addOrder($('#link1').text());">

edited Dec 28 '17 at 02:22

answered Dec 28 '17 at 02:14

Ken Y-N

14,644
21
71
114

Thanks so much, so if i want to do this with all of my options it will work just by changing the the h4 and the id right? – Dec 28 '17 at 02:32
Basically, yes, but you would be better off setting a handler function for each block of `h4`s. See [this Q&A](https://stackoverflow.com/q/38565635/1270789) for an example. Also, check the Bootstrap documentation as it should handle most of this for you, IIRC. **UPDATE**: See [this for Bootstrap menu handling](https://stackoverflow.com/q/37746023/1270789). – Ken Y-N Dec 28 '17 at 02:43

I want to put a link that adds what you pressed into an array If I say console.log(Array) it will return "undefined" as a string

2 Answers2