#javascript #html #css #button #colors
#javascript #HTML #css #кнопка #Цвет
Вопрос:
Я настроил 3 кнопки и задаюсь вопросом, как заставить их менять цвета при нажатии. «Да» должно быть зеленым, «Нет» должно быть красным, «Возможно» также должно быть красным.
<!DOCTYPE html>
<html lang="en">
<head>
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500amp;display=swap"
rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<title>Trivia!</title>
<script></script>
</head>
<body>
<div class="jumbotron">
<h1>Trivia!</h1>
</div>
<div class="container">
<div class="section">
<h2>Part 1: Multiple Choice</h2>
<hr>
<h3>Do you love me?
<h3>
<button id="q1button">Yes</button>
<button id="q2button">No</button>
<button id="q3button">Maybe</button>
</div>
</div>
</body>
</html>
Комментарии:
1. Это Java или Javascript? Это два совершенно разных языка.
2. Я имел в виду Javascript
3. К вашему сведению, ваш
<h3>тег не закрыт.
Ответ №1:
Вы можете сделать это с помощью javascript. Я думаю, что что-то подобное работает для вас.
<!DOCTYPE html>
<html>
<body>
<div class="jumbotron">
<h1>Trivia!</h1>
</div>
<div class="container">
<div class="section">
<h2>Part 1: Multiple Choice</h2>
<hr>
<h3>Do you love me?<h3>
<button id="q1button" onclick="this.style.background = 'green'">Yes</button>
<button id="q2button" onclick="this.style.background = 'red'">No</button>
<button id="q3button" onclick="this.style.background = 'red'">Maybe</button>
</div>
</div>
</body>
</html> Редактировать:
Обойдите их, чтобы все они были выделены.
<!DOCTYPE html>
<html>
<body>
<div class="jumbotron">
<h1>Trivia!</h1>
</div>
<div class="container">
<div class="section">
<h2>Part 1: Multiple Choice</h2>
<hr>
<h3>Do you love me?<h3>
<button id="q1button" onclick="changeBg(this);">Yes</button>
<button id="q2button" onclick="changeBg(this);">No</button>
<button id="q3button" onclick="changeBg(this);">Maybe</button>
</div>
</div>
<script>
function changeBg(button){
if(button.id == "q1button"){
button.style.background = "green";
document.getElementById("q2button").style.background = "transparent";
document.getElementById("q3button").style.background = "transparent";
}
else if(button.id == "q2button"){
button.style.background = "red";
document.getElementById("q1button").style.background = "transparent";
document.getElementById("q3button").style.background = "transparent";
}
if(button.id == "q3button"){
button.style.background = "red";
document.getElementById("q1button").style.background = "transparent";
document.getElementById("q2button").style.background = "transparent";
}
}
</script>
</body>
</html> Комментарии:
1. Проблема здесь в том, что если вы нажмете более одного, все они будут выделены.
2. Как мне обойти их выделение?
Ответ №2:
Попробуйте это :
<style>
.yes:focus {
background-color: green;
}
.no:focus {
background-color: red;
}
.maybe:focus {
background-color: yellow;
}
</style>
<button class="yes">Yes</button>
<button class="no">No</button>
<button class="maybe">Maybe</button> Дайте мне знать, если это сработает.
Комментарии:
1. Проблема с использованием фокуса заключается в том, что они нажимают на что-то другое, фокус и цвет исчезают.
2. @bobsfriend Верно
Ответ №3:
Вы это имеете в виду?
button:focus {
outline: none;
border: 1px solid black;
}
#q1button:focus {
background-color: green;
color: pink;
}
#q2button:focus {
background-color: red;
color: white;
}
#q3button:focus {
background-color: yellow;
color: black;
} <body>
<div class="jumbotron">
<h1>Trivia!</h1>
</div>
<div class="container">
<div class="section">
<h2>Part 1: Multiple Choice</h2>
<hr>
<h3>Do you love me?<h3>
<button id="q1button">Yes</button>
<button id="q2button">No</button>
<button id="q3button">Maybe</button>
</div>
</div>
</body> Комментарии:
1. Обратите внимание, что OP хочет разные цвета для разных кнопок
2. Возможно, предполагается, что он должен быть красным в соответствии с OP
3. Проблема с использованием фокуса заключается в том, что они нажимают на что-то другое, фокус и цвет исчезают.
4. Хорошо, я понимаю.
Ответ №4:
Вы можете добиться этого только с помощью CSS и некоторых изменений в HTML.
В примере я использую метки в форме кнопок для запуска входных данных, которые будут управлять визуальной эстетикой кнопок. Это обрабатывается в CSS с помощью селекторов the :checked и смежных для изменения цветов label .button .
.inputController {
display: none;
}
.inputController:checked .button-greenCK {
background-color: green;
}
.inputController:checked .button-redCK {
background-color: red;
}
.button {
font-size: 0.65em;
background-color: white;
border-radius: 5px;
padding: 5px 10px;
border: 1px solid lightgrey;
box-shadow: 3px 3px 3px rgba(0,0,0,0.25);
cursor: pointer;
margin-right: 5px;
}
.button_label {} <html lang="en">
<head>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500amp;display=swap" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<title>Trivia!</title>
<script>
</script>
</head>
<body>
<div class="jumbotron">
<h1>Trivia!</h1>
</div>
<div class="container">
<div class="section">
<h2>Part 1: Single Choice</h2>
<hr>
<h3>Do you love me?<h3>
<input id="q1button" name="trivia1" class="inputController" type="radio"/>
<label class="button button-greenCK" for="q1button">
<span class="button_value">Yes</span>
</label>
<input id="q2button" name="trivia1" class="inputController" type="radio"/>
<label class="button button-redCK" for="q2button">
<span class="button_value">No</span>
</label>
<input id="q3button" name="trivia1" class="inputController" type="radio"/>
<label class="button button-redCK" for="q3button">
<span class="button_label">Maybe</span>
</label>
</div>
</div>
<div class="container">
<div class="section">
<h2>Part 2: Multiple Choice</h2>
<hr>
<h3>Do you love me?<h3>
<input id="q4button" name="trivia2" class="inputController" type="checkbox"/>
<label class="button button-greenCK" for="q4button">
<span class="button_value">Yes</span>
</label>
<input id="q5button" name="trivia2" class="inputController" type="checkbox"/>
<label class="button button-redCK" for="q5button">
<span class="button_value">No</span>
</label>
<input id="q6button" name="trivia2" class="inputController" type="checkbox"/>
<label class="button button-redCK" for="q6button">
<span class="button_label">Maybe</span>
</label>
</div>
</div>
</body>
</html> Комментарии:
1. Помимо значительного изменения разметки, еще одна проблема с этим подходом заключается в том, что вам нужна кнопка сброса или фрагмент javascript на случай, если вы хотите просто отменить выбор
Ответ №5:
Вы можете использовать jQuery для добавления имени класса, хранящегося в атрибуте данных. Это упрощает выбор цвета кнопки непосредственно в разметке HTML.
Обратите внимание, что удаление класса color восстанавливает кнопку точно такой, какой она была раньше.
$(".answer").on("click", function(){
// Reset other answers.
$(".answer").removeClass("red green")
// Use the classname stored in the button's data attribute
$(this).addClass($(this).data("color"))
}) .green{
background: green;
}
.red{
background: red;
} <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500amp;display=swap" rel="stylesheet">
<div class="jumbotron">
<h1>Trivia!</h1>
</div>
<div class="container">
<div class="section">
<h2>Part 1: Multiple Choice</h2>
<hr>
<h3>Do you love me?</h3>
<button class="answer" id="q1button" data-color="green">Yes</button>
<button class="answer" id="q2button" data-color="red">No</button>
<button class="answer" id="q3button" data-color="red">Maybe</button>
</div>
</div> То же самое в обычном JS:
let btns = document.querySelectorAll(".answer")
btns.forEach(function(btn){
btn.addEventListener("click", function(){
// Reset other answers.
btns.forEach(function(btn){
btn.classList.remove("red")
btn.classList.remove("green")
})
// Use the classname stored in the button's data attribute
this.classList.add(this.getAttribute("data-color"))
})
}) .green{
background: green;
}
.red{
background: red;
} <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500amp;display=swap" rel="stylesheet">
<div class="jumbotron">
<h1>Trivia!</h1>
</div>
<div class="container">
<div class="section">
<h2>Part 1: Multiple Choice</h2>
<hr>
<h3>Do you love me?</h3>
<button class="answer" id="q1button" data-color="green">Yes</button>
<button class="answer" id="q2button" data-color="red">No</button>
<button class="answer" id="q3button" data-color="red">Maybe</button>
</div>
</div> Ответ №6:
Если вам нужно сохранить цвет, даже если кнопка не сфокусирована, вам нужно использовать JS для поддержания состояния кнопки. Вы можете добавить прослушиватель click событий к общему родительскому элементу, и если целью этого события является кнопка, просто переключите active на нее класс.
При нажатии кнопки может быть разумно отменить предыдущий выбор (если таковой имеется) в том же разделе, но в случае, если одновременный выбор разрешен, удалите внутренний if блок.
document.body.addEventListener('click', (ev) => {
let currentTgt = ev.target;
let previousSelected,
section;
/* a button is clicked? */
if (currentTgt.matches('button')) {
/* comment the next 'if' block if multiple buttons
* selection is allowed at the same time.
*
* Is a button already active and that button is not
* the same button I've just clicked? Then remove the
* active class from that button
*/
section = currentTgt.closest('.section');
previousSelected = section.querySelector('.active');
if (previousSelected amp;amp; currentTgt !== previousSelected) {
previousSelected.classList.remove('active');
}
currentTgt.classList.toggle('active');
}
}) .q1button.active { color: green }
.q2button.active,
.q3button.active { color: red } <div class="section">
<h2>Question #1</h2>
<button class="q1button">Yes</button>
<button class="q2button">No</button>
<button class="q3button">Maybe</button>
</div>
<div class="section">
<h2>Question #2</h2>
<button class="q1button">Yes</button>
<button class="q2button">No</button>
<button class="q3button">Maybe</button>
</div> В качестве примечания я предлагаю использовать классы вместо идентификаторов для кнопок, если вы планируете иметь более одного раздела с несколькими вопросами (и кнопками)
Ответ №7:
Вы можете использовать прослушиватель событий javascript и изменять цвет таким образом при нажатии на него.
Вы также должны отменить настройку других кнопок при нажатии другой.
const btn1= $('#q1button');
const btn2= $('#q2button');
const btn3= $('#q3button');
btn1.click( function() {
btn1.css('background', 'green');
btn2.css('background', 'initial');
btn3.css('background', 'initial');
});
btn2.click( function() {
btn1.css('background', 'initial');
btn2.css('background', 'red');
btn3.css('background', 'initial');
});
btn3.click( function() {
btn1.css('background', 'initial');
btn2.css('background', 'initial');
btn3.css('background', 'red');
}); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="jumbotron">
<h1>Trivia!</h1>
</div>
<div class="container">
<div class="section">
<h2>Part 1: Multiple Choice</h2>
<hr>
<h3>Do you love me?<h3>
<button id="q1button">Yes</button>
<button id="q2button">No</button>
<button id="q3button">Maybe</button>
</div>
</div>
</body>