Bueno, acabé de hacer una función que cree diversos elementos DOM para mostrar múltiples errores como elementos hijos de un padre elemento, creo que me di a entender. Soy algo nuevo con la sintaxis de JavaScript y lo hice lo mejor que pude, la publico para críticas constructivas y consejos.
/**
* @author iStocker <skype:DeathsInTheSky>
* @package showResult
* @category Ok / Error
* @version 1.2
**/
/**
* Mostrar diferentes resultados
*
* @param array|string data >> En caso de ser array debe de ser bidimensional con el mensaje y si es un error o no.
* >> En caso de ser string debe de contener el mensaje del resultado.
* @param bool error >> Si es un error o no.
**/
function showResult(data, error)
{
var response = document.getElementById('response');
if(data instanceof Array)
{
var box = new Array();
var error = new Array();
for(i = 0; i <= data.length; ++i)
{
box[i] = document.createElement('div');
if(data[i][1])
{
box[i].setAttribute('class', 'message error');
}
else
{
box[i].setAttribute('class', 'message ok');
}
error[i] = document.createTextNode(data[i][0]);
response.appendChild(box[i]);
box[i].appendChild(error[i]);
}
}
else
{
var box = document.createElement('div');
if(error)
{
box.setAttribute('class', 'message error');
}
else
{
box.setAttribute('class', 'message ok');
}
var error = document.createTextNode(data);
response.appendChild(box);
box.appendChild(error);
}
}
Ejemplo de uso
<html>
<head>
<title>Prueba de error</title>
<script src="showResult.js"></script>
<style>
.message{
border: 1px solid rgba(000,000,000,0.1);
color: white;
text-align: center;
box-shadow: inset 0px 0px 10px rgba(000,000,000,0.1);
text-shadow: 0 1px 0 rgba(000,000,000,0.2);
text-transform: uppercase;
margin:10px 0 10px 0;
padding: 6px 4px 5px 4px;
border-radius:2px;
}
.message:hover{
transition: 2s;
opacity:.82;
}
.ok.message{
background-color: rgb(59, 168, 0);
}
.error.message{
background-color: rgb(235, 4, 4);
}
</style>
<script>
// Array
var response = [['correcto',false],['error', true],['correcto', true]];
showResult(response);
// String
showResult('False con string:D', false);
showResult('Correcto con string', true);
</script>
</head>
<body>
<div id="response">
</div>
</body>
</html>
Espero y les sirva de algo ñ.ñ
