У меня есть этот код:
function myFunction(x) {
x.classList.toggle('change');
}
body,
hmtl {
background- color: black;
}
.container {
display: inline-block;
cursor: pointer;
}
.bar1,
.bar2,
.bar3 {
width: 39px;
height: 30px;
border-radius: 100px;
background-color: white;
margin: 20px 0;
transition: 0.4s;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-345deg) translate(-9px, 6px);
height: 100px;
position: relative;
top: -100px;
width: 200px;
}
.change .bar2 {
opacity: 6;
transform: rotate(3000deg);
width: 100px;
height: 100px;
position: relative;
left: 200px;
background- color: green;
top: -200px;
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
background-color: yellow;
width: 200px;
height: 200px;
position: relative;
left: 100px;
bottom: 200px;
}
<a id="mobile-nav" href="#">
<div class="container" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</a>
Я хотел бы, чтобы текст появлялся при нажатии на него, но не уверен, как.
У меня есть это:
function changeText(id) {
id.innerHTML = "Hello";
}
<!DOCTYPE html>
<html>
<body>
<h1 onclick="changeText(this)">Click on this text!
</h1>
</body>
</html>
Но не знаете, как объединить его с my Function и хотите, чтобы оно было go без текста до Hello. Это просто вопрос добавления
function changeText(id) {
id.innerHTML = "Hello";
}
между существующими тегами скрипта?
В данный момент появляются фигуры, но как мне заставить слово появиться, возможно, несколько, через myFunction? Можно ли даже превратить фигуру в слово?