Форум

Nikk · #1 (**permalink**) 26.04.2017, 15:21

Прошу помочь найти ошибку, почему-то не работает.

Необходимо, чтобы при загрузке страницы выводился элемент 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 · #2 (**permalink**) 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 · #3 (**permalink**) 26.04.2017, 18:21

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

Dilettante_Pro · #4 (**permalink**) 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 · #5 (**permalink**) 27.04.2017, 08:44

Сообщение от Nikk

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

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

Nikk · #6 (**permalink**) 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 · #7 (**permalink**) 27.04.2017, 14:24

Сообщение от Nikk

нашел решение

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

Тогда хоть так.

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

Форум

Справочник

Discord чат

Курсы javascript