Witam. Rzuciłem się na głęboką wodę, czy to dobrze czy źle, chciałbym jednak doprowadzić swój projekt do końca.
Zamysł jest taki, że na ekranie wyświetla się tekst, mam do wyboru 3 przyciski, każdy to inna opcja. Jeśli wybiorę "idę w lewo" historyjka toczy się dalej, a 3 buttony zmieniają swoje opcje. Swoje opcje, mam na myśli instancje biblioteki typed.js. Czyli przykładowo: "Idę ulicą, widzę to i to... Co robię? " i mam trzy guziki : idę w lewo, przed siebie i w prawo. Po kliknięciu wyświetla się tekst zdefiniowany wcześniej w instancji którą kliknąłem, "na mojej drodze pojawia się to i to, co robię?" i znów 3 opcje każdy button zawiera instancję wywołującą inny tekst.
Pokażę teraz obecny kod, zamieszczony obecnie na stronie ( STRONA )
<html>
<head>
<meta charset="utf-8">
<title>Interactive</title>
<meta author="Damian Pasternak">
<link rel="stylesheet" href="main_int.css">
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
<script src="https://unpkg.com/scrollreveal"></script>
</head>
<body>
<div id="tekst-block">
<p class="tekst">
</p>
<div id="opcje-row">
<input type="button" id="btn1" class="btn" value="Idę w lewo">
<input type="button" id="btn2" class="btn" value="Idę prosto">
<input type="button" id="btn3" class="btn" value="Idę w prawo">
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="typed.min.js"></script>
<script src="script_int.js"></script>
</body>
</html>
body{
background-color:rgba(46, 49, 49, 1);
letter-spacing:1px;
font-family: 'Roboto Mono', monospace;
color:rgb(255, 255, 255);
}
#tekst-block{
position:relative;
left:220px;
top:220px;
width:40%;
height:35%;
border:1px solid rgba(255, 255, 255, 0.651);
}
#opcje-row{
height:12%;
background-color: rgba(95, 95, 95, 0.534);
background: transparent;
width:100%;
position:absolute;
top:105%;
}
.tekst{
font-size:14px;
padding:20px;
width:75%;
}
.btn{
width:25%;
display:inline-block;
background-color: transparent;
color:rgba(255, 255, 255, 0.884);
border:none;
cursor:pointer;
height:100%;
font-family: 'Roboto Mono', monospace;
font-size:11px;;
letter-spacing:2px;
outline: none;
}
.btn:first-child{
margin-left:10%;
}
.btn:hover{
font-size:12px;
color:white;
}
var typed = new Typed('.tekst', {
strings: ["", "Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym."],
typeSpeed: 0.1
});
const button = document.querySelector('#btn1','#btn2','#btn3');
button.addEventListener('click', test);
let value = 1;
function test() {
if(value === 1) {
console.log('action for 1')
value = 2
var typed = new Typed('.tekst', {
strings: ["", " tekst po kliknieciu raz "],
typeSpeed: 30
});
document.getElementById('btn1').value = 'Idę w lewo'+value;
} else if(value ===2) {
console.log('action for 2')
value = 3;
var typed = new Typed('.tekst', {
strings: ["", " tekst po kliknieciu drugi raz "],
typeSpeed: 30
});
document.getElementById('btn1').value = 'Idę w lewo'+value;
}
else if(value ===3) {
console.log('action for 3')
value = 4;
var typed = new Typed('.tekst', {
strings: ["", " tekst po kliknieciu trzeci raz "],
typeSpeed: 30
});
document.getElementById('btn1').value = 'Idę w lewo'+value;
}
}
//////////////////////////////scroll reveal//////////////////////
window.sr = ScrollReveal();
sr.reveal('.btn', {
reset: true,
delay: 1000,
duration: 1500,
interval: 700
});
////////////////////////////////////////////////////////////////
Biblioteki Typed już nie będę załączał, ma się zmieniać tylko tekst z instancji.
Nie mam jeszcze zbyt obszernej wiedzy, dlatego zwracam się z prośbą o pomoc. Zastanawiałem się nad wieloma ifami, jednak może jest jakieś inne, lepsze rozwiązanie.
