Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Замена DIV id по нажатию на кнопку (https://javascript.ru/forum/misc/68606-zamena-div-id-po-nazhatiyu-na-knopku.html)

Nikk 26.04.2017 15:21

Замена 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>

ksa 26.04.2017 15:56

Цитата:

Сообщение от Nikk
при загрузке страницы выводился элемент 1, при нажатии на первую кнопку он менялся на элемент 2, а при нажатии на вторую кнопку - опять на элемент 1

Как вариант...
<!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>

Nikk 26.04.2017 18:21

ksa,
Кнопка 1 меняется на кнопку 2. Но <div id="graphID1"> на <div id="graphID2"> при этом - нет...
Или я чего-то не понимаю?

Dilettante_Pro 26.04.2017 18:33

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

ksa 27.04.2017 08:44

Цитата:

Сообщение от Nikk
Кнопка 1 меняется на кнопку 2. Но <div id="graphID1"> на <div id="graphID2"> при этом - нет...

Так же можно сделать и с ДИВами... Т.е. это пример как такое можно реализовать.

Nikk 27.04.2017 12:15

В итоге, нашел решение:
<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>

ksa 27.04.2017 14:24

Цитата:

Сообщение от Nikk
нашел решение

Не самое оптимальное... :no:

Тогда хоть так.
<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.