Tartaro 2
[[html]]
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Input y Output de Enlaces</title>
<style>
#inputBox, #outputBox {
margin: 10px;
padding: 10px;
border: 1px solid #000;
}
#outputBox {
margin-top: 20px;
}
ul {
list-style-type: none; /* Remover los puntos de la lista */
padding: 0;
}
li {
margin-bottom: 5px; /* Espacio entre los enlaces */
}
</style>
</head>
<body>
<div id="inputBox">
<input type="text" id="inputText" placeholder="Introduce los textos aquí separados por comas">
<button onclick="addInputs()">Añadir</button>
<button onclick="clearAll()">Limpiar</button>
</div>
<div id="outputBox">
<!-- Los enlaces se mostrarán aquí -->
</div>
<script>
var inputsOutputs = {
"google": ["https://www.google.com/", "https://news.google.com/"],
"youtube": ["https://www.youtube.com/", "https://studio.youtube.com/"]
// Puedes añadir más entradas aquí
};
function addInputs() {
var inputVals = document.getElementById('inputText').value.toLowerCase().split(',');
var outputDiv = document.getElementById('outputBox');
outputDiv.innerHTML = ''; // Limpiar los resultados anteriores
var list = document.createElement('ul');
inputVals.forEach(function(inputVal) {
inputVal = inputVal.trim(); // Eliminar espacios en blanco
if(inputsOutputs[inputVal]) {
inputsOutputs[inputVal].forEach(function(link) {
var listItem = document.createElement('li');
var anchor = document.createElement('a');
anchor.href = link;
anchor.textContent = link;
anchor.target = "_blank";
listItem.appendChild(anchor);
list.appendChild(listItem);
});
} else {
var listItem = document.createElement('li');
listItem.textContent = 'No hay enlaces asociados a "' + inputVal + '".';
list.appendChild(listItem);
}
});
outputDiv.appendChild(list);
}
function clearAll() {
document.getElementById('inputText').value = ''; // Limpiar el recuadro de input
document.getElementById('outputBox').innerHTML = ''; // Limpiar el recuadro de output
}
</script>
</body>
</html>
[[/html]]Este código HTML incluye CSS para estilizar los recuadros y JavaScript para manejar la lógica de los inputs y outputs. Los enlaces se almacenan en un objeto inputsOutputs, donde cada clave es un input y cada valor es un array de enlaces asociados. La función addInput() se encarga de tomar el valor del input, buscar en el objeto inputsOutputs y mostrar los enlaces correspondientes. La búsqueda no distingue entre mayúsculas y minúsculas gracias al método toLowerCase(). Puedes añadir más entradas al objeto inputsOutputs según sea necesario.
<script>
var inputsOutputs = {
"google": ["https://www.google.com/", "https://news.google.com/"],
"youtube": ["https://www.youtube.com/", "https://studio.youtube.com/"],
"ots": ["https://agiat.wikidot.com/ots-004", "https://agiat.wikidot.com/ots-009", "https://agiat.wikidot.com/ots-013", "https://agiat.wikidot.com/ots-016", "https://agiat.wikidot.com/ots-022", "https://agiat.wikidot.com/ots-023", "https://agiat.wikidot.com/ots-025", "https://agiat.wikidot.com/ots-032", "https://agiat.wikidot.com/ots-035", "https://agiat.wikidot.com/ots-040", "https://agiat.wikidot.com/ots-051", "https://agiat.wikidot.com/ots-064", "https://agiat.wikidot.com/ots-073", "https://agiat.wikidot.com/ots-081", "https://agiat.wikidot.com/ots-088", "https://agiat.wikidot.com/ots-090", "https://agiat.wikidot.com/ots-099"],
"ots_xd": ["https://agiat.wikidot.com/ots-007-xd", "https://agiat.wikidot.com/ots-041-xd", "https://agiat.wikidot.com/ots-067-xd"],
"otsxd": ["https://agiat.wikidot.com/ots-007-xd", "https://agiat.wikidot.com/ots-041-xd", "https://agiat.wikidot.com/ots-067-xd"],
"xd": ["https://agiat.wikidot.com/ots-007-xd", "https://agiat.wikidot.com/ots-041-xd", "https://agiat.wikidot.com/ots-067-xd"],
"Ots_prueba":["http://agiat.wikidot.com/system:page-tags/tag/ots","http://agiat.wikidot.com/system:page-tags/tag/ots"]
};//Aquí estuvo Nath.
1 por BinaryCube.
2 por BinaryCube.
3 por BinaryCube.
4 por BinaryCube.
5 por BinaryCube.
Changing Phrase 6 por BinaryCube.
7 por BinaryCube.
8 por BinaryCube.
El barto
revisión de página: 180, última edición: 15 Dec 2024 18:15