2013-09-06 6 views
0

Я динамически создаю скрытые значения на моей странице html в цикле и пытаюсь использовать указанные значения для создания диаграммы, но не могу получить доступ к document.getElementByID.Невозможно получить доступ к элементуbyID в javascript

Значит, он получает имя и номер из сервлета.

<%@ 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> 

Вот исходный код, когда я загрузить страницу:

<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> 

Я могу установить значение, но не могу их получить. Любая помощь будет оценена по достоинству.

+0

Идентификатор может не содержать пробелов символов – Quentin

ответ

1

Вы передаете элементы DOM, а не их значения.

Заменить

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

с

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

И, как упоминалось на Devang Rathod, вы не должны иметь места в идентификаторе (см reference).

+1

, но если я не ошибаюсь, то DOM-идентификатор не должен иметь пробел между ... справа ..? –

+1

@DevangRathod [вы правы] (http://www.w3.org/TR/html-markup/global-attributes.html) –

+0

Извините, я тоже пробовал это, но все же в источнике страницы он имеет значения document .getElementById («Лондонская фондовая биржа»). Значение вместо фактического значения элемента. – user2706577

0

использование документа.getElementById («Лондонская фондовая биржа»). Значение или вы можете использовать более простой jquery. Ex: («Фондовая биржа Лондона»). Val();

+0

Здесь нет тега jQuery. –