Znikanie diva

pytanie zadane 1 lipca 2018 w HTML i CSS przez JacXer Nowicjusz (160 p.)

<!DOCTYPE HTML>
<html lang="pl">
<head>
    <meta charset="utf-8" />
    <title>Odczytywacz kolorów</title>
    
    <link rel="stylesheet" href="style.css" type="text/css" />
    <script type ="text/javascript" src="script.js" ></script>

</head>
<body>

<div id="abc" >
<div id="abc1" onClick="color1()"></div>
<div id="abc2" onClick="color2()"></div>
<div id="abc3" onClick="color3()"></div>
<div id="abc4" onClick="color4()"></div>
<div id="abc5" onClick="color5()"></div>
<div id="abc6" onClick="color6()"></div>
<div id="abc7" onClick="color7()"></div>
<div id="abc8" onClick="color8()"></div>     
<div id="abc9" onClick="color9()"></div>
<div type="text" id="color" ><div/>
<div id="los" onClick="los()" >LOSUJ!<div>
</div>

</body>
</html>

body
{
    background-color: #222222;
    color: #ffffff;
    font-weight: 900;
}
#los
{
    background-color: #334679;
    width: 150px;
    height: 25px;
    padding-top: 10px;
    margin-top: 50px;
    margin-left: 0px;
    text-align: center;
}
#color
{
    background-color: #334679;
    width: 150px;
    height: 25px;
    padding-top: 10px;
    margin-top: 25px;
    margin-left: 75px;
    text-align: center;
}
#abc
{
    width: 400px;
    height: 400px;
    margin-top: 25px;
    margin-left: 25px;
}
#abc1
{
    width: 100px;
    height: 100px;
    background-color: deeppink;
}
#abc2
{
    width: 100px;
    height: 100px;
    background-color: blue;
    float:right;
    margin-top: -100px;
    margin-right: 200px;
}
#abc3
{
    width: 100px;
    height: 100px;
    background-color: #835C3B;
    float:right;
    margin-top: -100px;
    margin-right: 100px;
}
#abc4
{
    width: 100px;
    height: 100px;
    background-color: orange;
}
#abc5
{
    width: 100px;
    height: 100px;
    background-color: red;
    float:right;
    margin-top: -100px;
    margin-right: 200px;
}
#abc6
{
    width: 100px;
    height: 100px;
    background-color: white;
    float:right;
    margin-top: -100px;
    margin-right: 100px;
}
#abc7
{
    width: 100px;
    height: 100px;
    background-color: green;
}
#abc8
{
    width: 100px;
    height: 100px;
    background-color: yellow;
    float:right;
    margin-top: -100px;
    margin-right: 200px;
}
#abc9
{
    width: 100px;
    height: 100px;
    background-color: turquoise;
    float:right;
    margin-top: -100px;
    margin-right: 100px;
}

function color1()
{
    document.getElementById("color").innerHTML = "RÓŻOWY";
}
function color2()
{
    document.getElementById("color").innerHTML = "NIEBIESKI";    
}
function color3()
{
    document.getElementById("color").innerHTML = "BRĄZOWY";    
}
function color4()
{
    document.getElementById("color").innerHTML = "POMARAŃCZOWY";    
}
function color5()
{
    document.getElementById("color").innerHTML = "CZERWONY";    
}
function color6()
{
    document.getElementById("color").innerHTML = "BIAŁY";    
}
function color7()
{
    document.getElementById("color").innerHTML = "ZIELONY";    
}
function color8()
{
    document.getElementById("color").innerHTML = "ŻÓŁTY";    
}
function color9()
{
    document.getElementById("color").innerHTML = "JASNONIEBIESKI";    
}
function los()
{
    var los = Math.floor(Math.random()*9)+1;
    if (los==1) document.getElementById("color").innerHTML = "RÓŻOWY";
    else if (los==2) document.getElementById("color").innerHTML = "NIEBIESKI";
    else if (los==3) document.getElementById("color").innerHTML = "BRĄZOWY";
    else if (los==4) document.getElementById("color").innerHTML = "POMARAŃCZOWY";
    else if (los==5) document.getElementById("color").innerHTML = "CZERWONY";
    else if (los==6) document.getElementById("color").innerHTML = "BIAŁY";
    else if (los==7) document.getElementById("color").innerHTML = "ZIELONY";
    else if (los==8) document.getElementById("color").innerHTML = "ŻÓŁTY";
    else if (los==9) document.getElementById("color").innerHTML = "JASNONIEBIESKI";
}

Co zrobić żeby div z napisem losuj nie znikał po kliknięciu? Podejrzewam, że to wina innerHTML bo on usuwa elementy HTML i je podmienia ale nie wiem jak to naprawić.

komentarz 1 lipca 2018 przez kenjiro244 Dyskutant (8,600 p.)

Ja nie w temacie ale tworzyć 9 funkcji które dodają różne napisy do tego samego elementu jest całkowicie zbędne. Może lepiej stworzyć 1 funkcję z tablicą napisów a do funkcji przekazywać tylko index wybranego koloru.

komentarz 1 lipca 2018 przez JacXer Nowicjusz (160 p.)

Racja, poprawianiem kodu miałem się zająć jak miało działać :D Dzięki za rade.

2 odpowiedzi

odpowiedź 1 lipca 2018 przez Chess Szeryf (76,710 p.)
edycja 1 lipca 2018 przez Chess

Najlepsza

Masz błąd w HTML.

<div id="color"></div>

Div nie ma atrybutu text oraz masz źle tego div'a domkniętego.

<div id="color">...</div>
<br /><br /><br />
<div onclick="fate();">Randomness!</div>
<div onclick="restore_default_text();">Restore!</div>

const colors = ['yellow','black','pink','violet'];

var color = document.getElementById('color');

function fate() {
	let number_random = Math.floor(Math.random()*4);
	color.textContent = colors[number_random];
}

const copy_color = [color.textContent].slice();

function restore_default_text() {
	color.textContent = copy_color;
}

lub:

<div id="color">...</div>
<br /><br /><br />
<div data-order="1">Randomness!</div>
<div data-order="2">Restore!</div>

// (...)

function fate__or__restore_default_text(e) {
	if(e.target.getAttribute('data-order')==='1') {
		fate();
	}else if(e.target.getAttribute('data-order')==='2') {
		restore_default_text();
	}
}

document.addEventListener('click',fate__or__restore_default_text,false);

https://www.w3.org/TR/html5/dom.html#element-attrdef-global-data