Замена DIV id по нажатию на кнопку
Прошу помочь найти ошибку, почему-то не работает.
Необходимо, чтобы при загрузке страницы выводился элемент 1, при нажатии на первую кнопку он менялся на элемент 2, а при нажатии на вторую кнопку - опять на элемент 1. Элементы (графики Google Chart) привязаны к id graphID1 и graphID2, которые выводятся с помощью div. var IDs = [ "graphID2", "graphID1" ]; var curl = 1; function changeGraph(data) { if(curl == 0) { data.id = IDs[0]; curl = 1; } else { data.id = IDs[0]; curl = 0; } } var curl = 1; function changeGraph2(data) { if(curl == 0) { data.id = IDs[1]; curl = 1; } else { data.id = IDs[1]; curl = 0; } } <a href="#" class="button" onclick="changeGraph(document.getElementById('graphID2'))">График 2</a> <a href="#" class="button" onclick="changeGraph2(document.getElementById('graphID1'))">График 1</a> <div id="graphID1" style="width: 100%"></div> |
Цитата:
<!DOCTYPE html> <html> <head> <meta http-equiv='Content-Type' content='text/html; charset=windows-1251' /> <!-- <script src='http://code.jquery.com/jquery-latest.js'></script> <script src="https://code.angularjs.org/1.3.9/angular.min.js"></script> <script src="https://code.angularjs.org/1.3.9/angular-route.js"></script> --> <style type='text/css'> #test > a:first-child { display: inline; } #test > a:last-child { display: none; } #test.on > a:first-child { display: none; } #test.on > a:last-child { display: inline; } </style> <script type='text/javascript'> function go(Obj){ Obj.parentNode.classList.toggle('on'); }; </script> </head> <body> <div id='test'> <a href="#" class="button" onclick="go(this);">График 1</a> <a href="#" class="button" onclick="go(this);">График 2</a> </div> <div id="graphID1" style="width: 100%"></div> </body> </html> |
ksa,
Кнопка 1 меняется на кнопку 2. Но <div id="graphID1"> на <div id="graphID2"> при этом - нет... Или я чего-то не понимаю? |
<a href="#" class="button" onclick="changeId('graphID1')">График 1</a> <a href="#" class="button" onclick="changeId('graphID2')">График 2</a> <div id="graphID1" style="width: 100%"></div> <script> function changeId(newId) { document.querySelector('div').id = newId; } </script> |
Цитата:
|
В итоге, нашел решение:
<head> <title>Example</title> </head> <body> <button onclick="replace();return false"/>Click to Replace</button> <button onclick="replace2();return false"/>Click to Replace2</button> <div id = "div1" style="display:block">Text1</div> <div id = "div2" style="display:none">Text2</div> <script> function replace() { document.getElementById("div1").style.display="block"; document.getElementById("div2").style.display="none"; } function replace2() { document.getElementById("div1").style.display="none"; document.getElementById("div2").style.display="block"; } </script> </body> |
Цитата:
Тогда хоть так. <button onclick="replace(true);"/>Click to Replace</button> <button onclick="replace();"/>Click to Replace2</button> <div id = "div1" style="display:block">Text1</div> <div id = "div2" style="display:none">Text2</div> <script> function replace(Type) { document.getElementById("div1").style.display=(Type)? "block": 'none'; document.getElementById("div2").style.display=(Type)? "none": "block"; }; </script> |
Часовой пояс GMT +3, время: 04:50. |