How to call an ID in HTML more than once?

0

How to call an id more than once?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><!DOCTYPEhtml><html><head><metacharset="utf-8">
    <title>Agenda</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<link rel="stylesheet" href="css/w3.css">
</head>
<style>
.alert {
    padding: 20px;
    background-color: #ff9800;
    color: white;
}

.closebtn {
    margin-left: 15px;
    color: white;
    font-weight: bold;
    float: right;
    font-size: 22px;
    line-height: 20px;
    cursor: pointer;
    transition: 0.3s;
}

.closebtn:hover {
    color: black;
}
<!--
.esconde{
display:none;
}-->
.aparece{
display:inline;
}
</style>
<script language="JavaScript" type="text/javascript">
<!--
function muda(){
    classe = document.getElementById('tst').className; 
    if(classe == 'esconde'){
       document.getElementById('tst').className = 'aparece';
   }else{
       document.getElementById('tst').className = 'esconde';
   }
}
//-->
</script>

<?php
error_reporting (E_ALL & ~ E_NOTICE & ~ E_DEPRECATED);
// definições de host, database, usuário e senha
$host = "localhost";
$db   = "agenda";
$user = "root";
$pass = "";
// conecta ao banco de dados
$con = mysql_pconnect($host, $user, $pass) or trigger_error(mysql_error(),E_USER_ERROR); 
// seleciona a base de dados em que vamos trabalhar
mysql_select_db($db, $con);
$consulta = $_GET['consulta'];
// cria a instrução SQL que vai selecionar os dados
$query = sprintf("SELECT id, NOME, EMAIL, TELEFONE, TELEFONE2, TELEFONE3, TELEFONE4, EMPRESA, ENDERECO FROM contatos WHERE 'contatos'.'NOME' LIKE  '$consulta'");
// executa a query
$dados = mysql_query($query, $con) or die(mysql_error());
// transforma os dados em um array
$linha = mysql_fetch_assoc($dados);
// calcula quantos dados retornaram
$total = mysql_num_rows($dados);
?>
<body background="img/BH (1192)2.jpg" style="background-repeat:no-repeat;">
			<div class="form-group w3-padding-32 w3-content">
			<a href="cadastro.html" ><button class="btn btn-success center">Novo Contato</button></a>
			<a onClick="document.location.reload(true)" ><button  class="btn btn-info center">Atualizar</button></a>
			<a onClick="muda();"><button class="btn btn-warning center">Editar</button></a>
			<a href="../choice.html" ><button class="btn btn-danger center">Sair</button></a>
</div>
<div class="esconde" id="tst">
<div class="alert w3-content">
  O Modo de edição está <strong> ATIVO </strong>
</div>
</div>
		<div class="form-group w3-padding-32 w3-content">
<div class=" w3-container w3-content">
<br>
<form method="GET" action="busca.php?consulta=<?$consulta?>">
<label for="consulta"><font color="#ffffff">Buscar:</font></label>
<input type="text" value="<?=$consulta?>" id="consulta" name="consulta" maxlength="255" required />
<button type="submit" class="btn-primary"><i class="fa fa-search"></i></button>
</form>
</div>
</div>

<div class="w3-table-all w3-container w3-card">
<table border=1 style="font-size:11px;width:1280px">
			<tr>
			<th>Nome</th>
			<th>Email</th>
			<th>Telefones</th>
			<th>Empresa</th>
			<th>Endereço</th>
			<div class="esconde" id="tst">
			<th>Deletar</th>
			<th>Editar</th>
			</div>
			</tr>
<?php
	// se o número de resultados for maior que zero, mostra os dados
	if($total > 0) {
		// inicia o loop que vai mostrar todos os dados
		do {

?>

			<tr>
			<td><?=$linha['NOME']?></td>
			<td><?=$linha['EMAIL']?></td>
			<td><?=$linha['TELEFONE']?><br>
			<?=$linha['TELEFONE2']?><br>
			<?=$linha['TELEFONE3']?><br>
			<?=$linha['TELEFONE4']?></td>
			<td><?=$linha['EMPRESA']?></td>
			<td><?=$linha['ENDERECO']?></td>
			<div class="esconde" id="tst">
		<td><a href="#" onclick="javascript: if (confirm('Você realmente deseja excluir este Contato ?'))location.href='excluir.php?id=<?=$linha['id']?>'" style="margin-left:13px"><i class="fa fa-trash-o w3-xlarge"></i></a></td>
			<td><a href="#" onclick="javascript: location.href='troca.php?id=<?=$linha['id']?>'" style="margin-left:13px"><i class="fa fa-pencil w3-xlarge"></i></a></td>
			</div>
        	</tr>
<?php			
		// finaliza o loop que vai mostrar os dados
		}while($linha = mysql_fetch_assoc($dados));
	// fim do if 
	}
?>
</table>
</div>
</body>
</html>
<?php
// tira o resultado da busca da memória
mysql_free_result($dados);
?>

On this page, the tst id only appears when you click edit, but you can not call the id more than once. Solutions?

PS: Ignore the part of PHP And Mysql

    
asked by anonymous 06.09.2017 / 22:04

1 answer

0

IDs are attributes that can not be repeated, this is because ID means "Identity", ie two elements can not have the same identity.

Maybe the ideal would be to create an ID for each, to adjust you can change the getElementById by another attribute, such as a custom HTML5 attribute called data- , let's call data-toggle="..." , the function should look like this: / p>

var modoedicao = false; //Inicia como false, modo edição "desligado"

function muda(id){
   modoedicao = !modoedicao;//Alterna entre edição e leitura

   var els = document.querySelectorAll('[data-toggle]');

   for (var i = 0; i < els.length; i++) {
        if (modoedicao) {
           array[i].className = 'aparece';
        } else {
           array[i].className = 'esconde';
        }
   }
}

And the HTML elements should look like this:

<div class="esconde" data-toggle="tst">
    
06.09.2017 / 22:53