Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript] jak podać do js zmienna z html
Forum PHP.pl > Forum > Przedszkole
gregi
1.12.2016, 23:19:25
Cześć,
jak podać do js zemienną z html?
${name} - tu znajduje sie json w postaci strings który chce podać do skryptu
[HTML] pobierz, plaintext 
  1. <p id="lista">${name}</p>
  2.  
  3. <script>
  4. var pie = new d3pie("pieChart", {
  5. 	"header": {
  6. 		\
  7. 	"size": {
  8. 		"canvasWidth": 590,
  9. 		"pieOuterRadius": "90%"
  10. 	},
  11. 	"data": {
  12. 		"sortOrder": "value-desc",
  13. 		"content":
  14. 		[tu chce podać strina z id=lista]
  15. 	},
[HTML] pobierz, plaintext
emstawicki
2.12.2016, 08:58:27
Aby pobrać zawartość tekstową elementu po identyfikatorze:

Javascript bez żadnej biblioteki:
Kod
var element = document.getElementById('lista');
var zawartosc = element.textContent;
gregi
2.12.2016, 10:55:31
w połowie kodu jest linia:
"content":  zawartosc //<- ####Czemu tutaj nie podstawia wartości z zmiennej?questionmark.gifquestionmark.gifquestionmark.gifquestionmark.gif

no i pytanie dlaczego zmienna zawartość nie jest podsawiana jej wartość questionmark.gif


[PHP] pobierz, plaintext 
  1. <!DOCTYPE HTML>
  2. <html xmlns:th="http://www.thymeleaf.org">
  3. <head> 
  4.     <title>Getting Started: Serving Web Content</title> 
  5.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6.     <!--<script  type="text/javascript"  src="../../static/js/html5-canvas-bar-graph.js" th:src="@{/js/html5-canvas-bar-graph.js}"></script>-->
  7. </head>
  8. <!--jop cos nie tak-->
  9. <body >
  10. <p id="name" th:text="${name}" />
  11. <p id="lista" th:text="${name}" />
  12. <div id="pieChart"></div>
  13. <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.4/d3.min.js"></script>
  14. <script  type="text/javascript"  src="../../static/js/d3pie.js" th:src="@{/js/d3pie.js}"></script>
  15. <script>
  16.   document.addEventListener("DOMContentLoaded", function(event) {
  17.  
  18. var element = document.getElementById('name').innerHTML;
  19. var zawartosc = element;
  20. alert(zawartosc);
  21. console.log(element);
  22. console.log(zawartosc);
  23.  console.log(typeof zawartosc);
  24.  
  25. var pie = new d3pie("pieChart", {
  26. 	"header": {
  27. 		"title": {
  28. 			"text": "Lots of Programming Languages",
  29. 			"fontSize": 24,
  30. 			"font": "open sans"
  31. 		},
  32. 		"subtitle": {
  33. 			"text": "A full pie chart to show off label collision detection and resolution.",
  34. 			"color": "#999999",
  35. 			"fontSize": 12,
  36. 			"font": "open sans"
  37. 		},
  38. 		"titleSubtitlePadding": 9
  39. 	},
  40. 	"footer": {
  41. 		"color": "#999999",
  42. 		"fontSize": 10,
  43. 		"font": "open sans",
  44. 		"location": "bottom-left"
  45. 	},
  46. 	"size": {
  47. 		"canvasWidth": 590,
  48. 		"pieOuterRadius": "90%"
  49. 	},
  50. 	"data": {
  51. 		"sortOrder": "value-desc",
  52. 		"content":  zawartosc   //<- ####Czemu tutaj nie podstawia wartości z zmiennej?questionmark.gifquestionmark.gifquestionmark.gifquestionmark.gif
  53. 	},
  54. 	"labels": {
  55. 		"outer": {
  56. 			"pieDistance": 32
  57. 		},
  58. 		"inner": {
  59. 			"hideWhenLessThanPercentage": 3
  60. 		},
  61. 		"mainLabel": {
  62. 			"fontSize": 11
  63. 		},
  64. 		"percentage": {
  65. 			"color": "#ffffff",
  66. 			"decimalPlaces": 0
  67. 		},
  68. 		"value": {
  69. 			"color": "#adadad",
  70. 			"fontSize": 11
  71. 		},
  72. 		"lines": {
  73. 			"enabled": true
  74. 		},
  75. 		"truncation": {
  76. 			"enabled": true
  77. 		}
  78. 	},
  79. 	"effects": {
  80. 		"pullOutSegmentOnClick": {
  81. 			"effect": "linear",
  82. 			"speed": 400,
  83. 			"size": 8
  84. 		}
  85. 	},
  86. 	"misc": {
  87. 		"gradient": {
  88. 			"enabled": true,
  89. 			"percentage": 100
  90. 		}
  91. 	}
  92. });
  93. });
  94. </script>
  95. <!--<p id="lista">${name}</p>-->
  96.  
  97. <!--<p id="lista" th:text="'Hello1, ' + ${name} + '!'" />-->
  98.  
  99.  
  100.  
  101. </body>
  102.  
  103. </html>
[PHP] pobierz, plaintext
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.