Prośba o korektę kodu Podmiana kodu na stronie

Question

Cześć, 

Proszę o pomoc chciałbym aby po kliknięciu buttoba zamiast diva "tetetstowy" pojawiła się ta konsola.

Poniżej zamieszczam cały kod 

Próbowałem zrobić to za pomocą get.Element i innerHTML ale jak sami możecie zobaczyć zamienia się sam kod a nie wywołanie funkcji co tu jest źle ;/

 

var typing = document.querySelector('.typing'),
    currentIndex = 0;

var startTyping = function (text) {
  
 var interval = setInterval(function(){
      if (text.length > currentIndex) {
        typing.textContent += text[currentIndex];
        currentIndex++;
      } else {
        clearInterval(interval);
      } 
  },100);
}

startTyping("[root@28.3.4.53.2]");

function podmianka() {
	var a = document.getElementsByClassName("tetestowy");
	a[0].innerHTML= startTyping;
	
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="stylekonsola.css">
  <title>
    TEST
  </title>
</head>
<body>
  <div class="console">
    <pre class="typing">$ </pre>
  </div>
  <div class="tetestowy">
	<h1>Tetowa Strona </h1>
	<p>rererere heheheh ssadasdasdvadv</p>
	
	<button onclick="podmianka()">Try it</button>
 <script src="scriptkosnola.js"> </script>
</body>
</html>

.console {
  background: #000000;
  height: 400px;
  width: 600px;
  border: 3px solid #c0c0c0;
  padding: 10px;
  border-top-width: 20px;
  position: relative;
  border-radius: 3px;
}

.console::before {
  content: '';
  width: 10px;
  height: 10px;
  position: absolute;
  background: #ff0000;
  border-radius: 50%;
  top: -15px;
  left: 3px;
}

.console::after {
  content: '';
  width: 10px;
  height: 10px;
  position: absolute;
  background: #ffa500;
  border-radius: 50%;
  top: -15px;
  left: 15px;
 
}

.typing {
  color: #34d834;
  margin: 0;
}

.typing::before {
  content: 'user@rootadmin.je : ~';
  display: block;
}

.typing::after {
  content: '_';
  animation: blink 0.6s infinite;
}

@keyframes blink {
   0%, 49% { opacity: 0; }
  50%, 99% { opacity: 1; }
}

 

Comments

Do precyzyj. Po kliknięciu klawisza na klawiaturze czy buttona?

---

Po kliknięciu buttona (poprawiłem w opisie)

Answer 1

Najprościej ustawić display: none; dla .console i po kliknięciu zmienić na display: block; jednocześnie zastępując napis h1 i p pustym stringiem (zamknąć oba do pojemnika i  usunąć, zmienić, ukryć czy co tam potrzeba)

Comments

Nie zauważyłem, że masz już opis zamknięty w div.tetestowy więc tak jak napisałem wcześniej trzeba go ukryć,usunąć czy co tam potrzeba. BRAKUJE ZAMKNIĘCIA DIVA TETESTOWY </div>

---

Stworzyłem coś takiego ale nie działa ;/

 

function podmianka() {
	var element = document.getElementsByClassName("console");{
		for(i=0;i<element.length;i++)
		{
		if (element[i].getAttribute('rel')=='abc')
		{
		element[i] className= 'display_po_zmianie';
			}
		}

<button rel="abc" onclick="podmianka()">Try it</button>

.console {
  background: #000000;
  height: 400px;
  width: 600px;
  border: 3px solid #c0c0c0;
  padding: 10px;
  border-top-width: 20px;
  position: relative;
  border-radius: 3px;
  display:none ;
  display_po_zmianie: block;

 

---

Po prostu pobierasz .console  i zmeniasz na display: block; a testowy na style = "display: none"; albo innerHTML = ""; albo textContent = "";

<div class="console">
<pre class="typing">$ </pre>
</div>
<div class="tetestowy">
<h1>Tetowa Strona </h1>
<p>element p</p>
</div>
<button>Pokaż konsolę</button>

.console {
  background: #000000;
  height: 400px;
  width: 600px;
  border: 3px solid #c0c0c0;
  padding: 10px;
  border-top-width: 20px;
  position: relative;
  border-radius: 3px;
  display:none ;
}

.console::before {
content: '';
width: 10px;
height: 10px;
position: absolute;
background: #ff0000;
border-radius: 50%;
top: -15px;
left: 3px;
}

.console::after {
content: '';
width: 10px;
height: 10px;
position: absolute;
background: #ffa500;
border-radius: 50%;
top: -15px;
left: 15px;

}

.typing {
color: #34d834;
margin: 0;
}

.typing::before {
content: 'user@rootadmin.je : ~';
display: block;
}

.typing::after {
content: '_';
animation: blink 0.6s infinite;
}

@keyframes blink {
0%, 49% { opacity: 0; }
50%, 99% { opacity: 1; }
}

var typing = document.querySelector('.typing'),
currentIndex = 0, 
button = document.getElementsByTagName('button')[0];

var startTyping = function (text) {
var interval = setInterval(function(){
if (text.length > currentIndex) {
typing.textContent += text[currentIndex];
currentIndex++;
} else {
clearInterval(interval);
} 
},100);
}
startTyping("[root@28.3.4.53.2]");
function showConsole (){
 document.getElementsByClassName("console")[0].style = "display: block";
document.getElementsByClassName("tetestowy")[0].textContent = "";
}

button.addEventListener("click", showConsole, false);