innerHTMLを触らないよう修正

Babibubebon · May 5, 2016 · 371fcdd · 371fcdd
1 parent 2842aba
commit 371fcdd
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 5 deletions.
diff --git a/index.html b/index.html
@@ -8,7 +8,7 @@
 <body>
   <canvas id="canvas"></canvas>
   <div id="menu">
-    <button id="menu-collapsible-btn"></button>
+    <button id="menu-collapsible-btn"><i class="fa fa-cog"></i></button>
     <ul id="menu-colors">
     </ul>
     <input type="range" id="menu-line-width" min="1" max="200" step="10" value="10" /><br />

diff --git a/js/view/menu-view.js b/js/view/menu-view.js
@@ -47,12 +47,14 @@ MenuView.prototype.setCollapsibleButtonVisible = function(visible) {
 };
 
 MenuView.prototype.setCollapsibleButtonMode = function(isPlaying) {
-  this.isPlaying = isPlaying
-  const collapsibleButton = document.getElementById("menu-collapsible-btn");
+  this.isPlaying = isPlaying;
+  const icon = document.querySelector("#menu-collapsible-btn i");
   if (isPlaying) {
-    collapsibleButton.innerHTML = "<i class=\"fa fa-pause\"></i>";
+    icon.classList.add("fa-pause");
+    icon.classList.remove("fa-cog");
   } else {
-    collapsibleButton.innerHTML = "<i class=\"fa fa-cog\"></i>";
+    icon.classList.add("fa-cog");
+    icon.classList.remove("fa-pause");
   }
 };
 export default MenuView;