Cannot access elementbyID in a javascript

Question

I am dynamically creating hidden values on my html page in a loop, and trying to use said values to create a chart, but cannot seem to access with document.getElementByID.

So it gets the name and a number from a servlet. The

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
<link rel="stylesheet" type="text/css" href="buttons.css">
<link rel="stylesheet" type="text/css" href="${skin}.css">
<link rel="stylesheet" type="text/css" href="tables.css">
<link href='http://fonts.googleapis.com/css?family=Oswald'
    rel='stylesheet' type='text/css'>
<title>Hello ${user}</title>

<title>Radar Chart</title>
<script src="Chart.js"></script>
<meta name="viewport" content="initial-scale = 1, user-scalable = no">
<style>
canvas {

}
</style>

</head>
<body>
    <center>
        <br>
        <div class="container">
            <h1>Number of Trades Per Stock Exchange</h1>
        </div>

        <div id="container">
            <table class="zebra">
                <thead>
                    <tr>
                        <th scope="col">Company</th>
                        <th scope="col">Number of Trades Made</th>
                    </tr>
                </thead>
                <tbody>
                    <c:forEach items="${first}" varStatus="loop">
                        <tr>
                            <td><c:out value="${first[loop.index]}" /></td>
                            <td><c:out value="${price[loop.index]}" /></td>
                            <input type="hidden" id="${first[loop.index]}"
                                value="${price[loop.index]}" />
                        </tr>
                    </c:forEach>
                </tbody>
            </table>
        </div>
        <br>

        <canvas id="canvas" height="450" width="450"></canvas>

        <script>
            var pieData = [ {
                value : document.getElementById("London Stock Exchange"),
                color : "#F38630"
            }, {
                value : document.getElementById("BombayStockExchange"),
                color : "#E0E4CC"
            }, {
                value : document.getElementById("New York Stock Exchange"),
                color : "#69D2E7"
            }

            ];

            var myPie = new Chart(document.getElementById("canvas").getContext(
                    "2d")).Pie(pieData);
        </script>

        <br> <br>

        <div id="inline-link-1">
            <a href="semanagerpanelredirect">Return to Stock Exchange Manager
                panel</a>
        </div>
    </center>
</body>
</html>

Here is the source code when I load the page:

<html>

<head>

<link rel="stylesheet" type="text/css" href="buttons.css">

<link rel="stylesheet" type="text/css" href="blue.css">

<link rel="stylesheet" type="text/css" href="tables.css">

<link href='http://fonts.googleapis.com/css?family=Oswald'

    rel='stylesheet' type='text/css'>

<title>Hello LondonManager</title>



<title>Radar Chart</title>

<script src="Chart.js"></script>

<meta name="viewport" content="initial-scale = 1, user-scalable = no">

<style>

canvas {



}

</style>



</head>

<body>

    <center>

        <br>

        <div class="container">

            <h1>Number of Trades Per Stock Exchange</h1>

        </div>



        <div id="container">

            <table class="zebra">

                <thead>

                    <tr>

                        <th scope="col">Company</th>

                        <th scope="col">Number of Trades Made</th>

                    </tr>

                </thead>

                <tbody>



                        <tr>

                            <td>London Stock Exchange</td>

                            <td>23</td>

                            <input type="hidden" id="London Stock Exchange"

                                value="23" />

                        </tr>



                        <tr>

                            <td>BombayStockExchange</td>

                            <td>1</td>

                            <input type="hidden" id="BombayStockExchange"

                                value="1" />

                        </tr>



                        <tr>

                            <td>New York Stock Exchange</td>

                            <td>9</td>

                            <input type="hidden" id="New York Stock Exchange"

                                value="9" />

                        </tr>



                </tbody>

            </table>

        </div>

        <br>



        <canvas id="canvas" height="450" width="450"></canvas>



        <script>

            var pieData = [ {

                value : document.getElementById("London Stock Exchange"),

                color : "#F38630"

            }, {

                value : document.getElementById("BombayStockExchange"),

                color : "#E0E4CC"

            }, {

                value : document.getElementById("New York Stock Exchange"),

                color : "#69D2E7"

            }



            ];



            var myPie = new Chart(document.getElementById("canvas").getContext(

                    "2d")).Pie(pieData);

        </script>



        <br> <br>



        <div id="inline-link-1">

            <a href="semanagerpanelredirect">Return to Stock Exchange Manager

                panel</a>

        </div>

    </center>

</body>

</html>

I can set the values but cannot get them. Any help would be appreciated.

An ID may not contain space characters

Quentin
– Quentin

2013-09-06 10:39:43 +00:00
Commented Sep 6, 2013 at 10:39 — Quentin
– Quentin, Commented Sep 6, 2013 at 10:39

Denys Séguret · Accepted Answer · 2013-09-06 10:41:22Z

1

You're passing the DOM elements, not their values.

Replace

            value : document.getElementById("London Stock Exchange"),

with

            value : document.getElementById("London Stock Exchange").value,

And, as mentionned by Devang Rathod, you should not have spaces in your id (see reference).

edited Sep 6, 2013 at 10:41

answered Sep 6, 2013 at 10:23

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Devang Rathod Over a year ago

but if i am not wrong DOM id must not has a SPACE inbetween...right..?

Denys Séguret Over a year ago

@DevangRathod you're right

user2706577 Over a year ago

Sorry I tried that also, but still in the page source it has values document.getElementById("London Stock Exchange").value rather than the actual value of the element.

Denys Séguret Over a year ago

@user2706577 For curiosity, what browser are you using ?

darkHorse · Accepted Answer · 2013-09-06 10:37:18Z

0

use document.getElementById("London Stock Exchange").value or you can use simpler jquery. Ex : ("#London Stock Exchange").val();

answered Sep 6, 2013 at 10:37

darkHorse

131 silver badge8 bronze badges

1 Comment

Denys Séguret Over a year ago

There's no jQuery tag here.

Collectives™ on Stack Overflow

Cannot access elementbyID in a javascript

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related