Изменение видимого <div>с помощью JavaScript - PullRequest
Новая
       1

Изменение видимого <div>с помощью JavaScript

0 голосов
/ 08 октября 2018

Я создаю расширение Chrome, и мне нужно показать определитель при нажатии кнопки и скрыть остальные.Код одинаков для трех кнопок, но работают только 2 из них.

Он был создан с 3 кнопками (крест, mlb и hsp) и 3, каждая из которых связана с кнопкой.Например, нажав «крестик», связанный с mlb и hsp придется скрыть (display: none), в то время как крестик должен быть виден (display: block).Он работает при нажатии кнопок cross и hsp, но не работает с кнопкой mlb.

Я пробовал с отдельными функциями, и он тоже не работает.

Любая помощь приветствуется. 

document.addEventListener('DOMContentLoaded', function () {
  document.querySelector('#hsp').addEventListener('click', myFunctionHSP);
  document.querySelector('#cross').addEventListener('click', myFunctionHSP);
  document.querySelector('#mlb').addEventListener('click', myFunctionHSP);
	document.querySelector('#udequipo').addEventListener('click', myFunctionUnidades);
});

function myFunctionHSP() {
    var hsp = document.getElementById("toggleHSP");
	var latam = document.getElementById("toggleLATAM");
	var mlb = document.getElementById("toggleMLB");
	
	if (hsp.style.display = "none") {
        hsp.style.display = "block";
		latam.style.display = "none";
		mlb.style.display = "none";	}
	else if (latam.style.display = "none") {
        latam.style.display = "block";
	    hsp.style.display = "none";
		mlb.style.display = "none";}
	else if (mlb.style.display = "none") {
        mlb.style.display = "block";
		latam.style.display = "none";
		hsp.style.display = "none";
	    } 
}


	
	

	function myFunctionUnidades(){
		var hsp = document.getElementById("toggleHSP");
		var latam = document.getElementById("toggleLATAM");
		var mlb = document.getElementById("toggleMLB");
		var uni= document.getElementById("unidades");	
		if (uni.style.display = "none") {
       	    uni.style.display = "block";
			latam.style.display = "none";
			hsp.style.display = "none";
			mlb.style.display = "none";
	    	} 
	
	}
   #header{
    width: 400px;
    display: inline-block;
    margin: 10px;
    margin-left: 10px;
    margin-right: 10px;
    text-align: center;
}

#toggleHSP {
    border-color: red;
    display: none;
}

#toggleLATAM {
    border-color: red;
    display: none;
    
}

#toggleMLB {
    border-color: red;
    display: none;
}

.principal {
    width:auto;
    height: auto;
    text-align:center;
}


#unidades {
    display: none;
    width: auto;
    height: 300px;
    vertical-align: bottom;
}

#loguito {
    display: inline-block;
    float: left;
}

#loguito2 {
    display: inline-block;
    float: right;
}


#udequipo {
    background-color: white;
    color: black;
    border: 2px solid #4CAF50; /* Green */
    border-radius: 6px;
    width: 131px;
    height: 50px;
    margin-top: 10px;
}

#otracosa {
    background-color: white;
    color: black;
    border: 2px solid #4CAF50; /* Green */
    border-radius: 6px;
    width: 131px;
    height: 50px;
    margin-top: 10px;
}

#otraotracosa {
    background-color: white;
    color: black;
    border: 2px solid #4CAF50; /* Green */
    border-radius: 6px;
    width: 131px;
    height: 50px;
    margin-top: 10px;
}

.seleccion {
    width: 133px;
    height: 50px;
}

.division {
    background-color: white;
    border-width: 0px;
    min-width: 100px;
    min-height: 50px;
    vertical-align:central;
}

    .division:hover {
        background-color: blue;
        color: white;
    }

    .division:active {
        background-color: red;
    }

.internal {
    width: 400px;
    background-color: white;
    color: black;
    border: 2px solid #4CAF50; /* Green */
    border-radius: 6px;
    height: 50px;
    margin-top: 10px;
}
    
<!DOCTYPE html>

<LINK REL=StyleSheet HREF="meli.css" TYPE="text/css" MEDIA=screen>
<script src="meli.js"></script>


    <html lang="en" xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title>MeliTools</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <title> </title>
    </head>
    <body>

        <div id="header">
            <image id="loguito" src="icon48.png"> </image><button class="division" id="hsp"> HSP </button>
            <button active class="division" id="cross"> LATAM </button>
            <button class="division" id="mlb"> MLB </button><image id="loguito2" src="icon48.png">
        </div>

        <div class="principal" id="toggleHSP">
            TEST HSP
        </div>

        <div class="principal" id="toggleLATAM">
            <button class="submenu" id="udequipo"> sub1 </button>
            <button class="division" id="otracosa"> sub2 </button>
            <button class="division" id="otraotracosa"> sub3 </button>

            <div class="jojo" id="unidades">
                <button class="internal" id="prueba"> interno1 </button><br>
                <button class="internal" id="prueba1"> interno2 </button><br>
                <button class="internal" id="prueba2"> interno3 </button><br>
            </div>

        </div>

        <div class="principal" id="toggleMLB">
            TEST MLB
        </div>


        <div> Test info bar </div>

    </body >
    </html >
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...