JavaScript onClick Сброс и/или другой результат

Я новичок в JavaScript и застрял в решении этой проблемы сегодня.JavaScript onClick Сброс и/или другой результат

У меня есть кнопка и 2 прямоугольника, одна красная одна синяя. Как только я нажимаю кнопку, переключатель переключается (более похожий на цвет), то, что я пытаюсь понять, состоит в том, чтобы сделать второй щелчок обратно в исходное состояние, в котором находятся эти два прямоугольника. Пока это работает только в одном направлении.

Любой ответ будет оценен!

function changeColorOfElementID(id, color){ 
 

 
\t document.getElementById(id).style.backgroundColor = color; 
 

 
}

#aRectangle{ 
 
\t position:absolute; 
 
\t width:100px; 
 
\t height:100px; 
 
\t left:100px; 
 
\t top:100px; 
 
\t background-color: blue; 
 
\t z-index:1; 
 
} 
 
#aRectangle2{ 
 
\t position:absolute; 
 
\t width:100px; 
 
\t height:100px; 
 
\t left:110px; 
 
\t top:110px; 
 
\t background-color: red; 
 
\t z-index:1; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>Color Switch</title> 
 
\t <script src="js/code.js"></script> 
 
\t <link rel="stylesheet" type="text/css" href="css/style.css"> 
 
</head> 
 
<body> 
 
<button onClick="changeColorOfElementID('aRectangle', 'red'); changeColorOfElementID('aRectangle2', 'blue'); " >Change Color</button> 
 

 
<div id="aRectangle"></div> 
 
<div id="aRectangle2"></div> 
 
</body> 
 
</html>

источник

2015-06-23 Semachka Ukr

Он работает только на пути, потому что это то, что вы говорите ему делать. Вы говорите: когда кто-то щелкает, измените это на красный, а другой на синий. Поэтому, когда пользователь нажимает на него, он меняет цвет, но затем, когда он снова нажимает, он пытается изменить красный на красный и синий на синий. – jsam

Вы можете сделать что-то вроде этого:

function changeColorOfElementID(id){ 

    if(document.getElementById(id).style.backgroundColor == 'red') 
     document.getElementById(id).style.backgroundColor = 'blue'; 

    else 
     document.getElementById(id).style.backgroundColor = 'red' 
}

HTML

<button onClick="changeColorOfElementID('aRectangle'); changeColorOfElementID('aRectangle2'); " >Change Color</button>

источник

2015-06-23 15:37:55

Я ценю ответ, он был близок к тому, что требовалось! Единственная разница, которую я сделал 2 функции: один был changeColorOfElementID1 и changeColorOfElementID2 после того, как в кнопке я связал «прямоугольник» с первым и «arectangle2» со вторым, а также отрегулировал цветовой узор. Большое спасибо! –

Я рад, что это помогло вам решить проблему ... :) –

Вы можете создать функцию, как этот

function toggleElementColor(id1,id2){ 
    var element1 = document.getElementById(id1); 
    var element2 = document.getElementById(id2); 

    var element1Color = element1.style.backgroundColor; 
    var element2Color = element2.style.backgroundColor; 

    element1.style.backgroundColor = element2Color; 
    element2.style.backgroundColor = element1Color; 
}

и Вам нравится этот

<button onClick="toggleElementColor('aRectangle','aRectangle2');" >Change Color</button>

источник

2015-06-23 15:50:20 Mohit

Надеюсь, она решила вашу проблему. Пожалуйста, отметьте ответ как принятый – Mohit

Спасибо всем, очень помогли мне!

Это было решение, которое было получено от всей помощи получили:

function changeColorOfElementID1(id){ 
 

 
    if(document.getElementById(id).style.backgroundColor == 'red') 
 
     document.getElementById(id).style.backgroundColor = 'blue'; 
 

 
    else 
 
     document.getElementById(id).style.backgroundColor = 'red' 
 
} 
 

 
function changeColorOfElementID2(id){ 
 

 
    if(document.getElementById(id).style.backgroundColor == 'blue') 
 
     document.getElementById(id).style.backgroundColor = 'red'; 
 

 
    else 
 
     document.getElementById(id).style.backgroundColor = 'blue' 
 
}

#aRectangle{ 
 
\t position:absolute; 
 
\t width:100px; 
 
\t height:100px; 
 
\t left:100px; 
 
\t top:100px; 
 
\t background-color: blue; 
 
\t z-index:1; 
 
} 
 
#aRectangle2{ 
 
\t position:absolute; 
 
\t width:100px; 
 
\t height:100px; 
 
\t left:110px; 
 
\t top:110px; 
 
\t background-color: red; 
 
\t z-index:1; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>Color Switch</title> 
 
\t <script src="js/code.js"></script> 
 
\t <link rel="stylesheet" type="text/css" href="css/style.css"> 
 
</head> 
 
<body> 
 
<button onClick="changeColorOfElementID1('aRectangle'); changeColorOfElementID2('aRectangle2'); " >Change Color</button> 
 
<div id="aRectangle"></div> 
 
<div id="aRectangle2"></div> 
 
</body> 
 
</html>

источник

2015-06-23 16:03:01

JavaScript onClick Сброс и/или другой результат

ответ

Смежные вопросы