My problem is that I have my JavaScript code to which I want to add Jquery for a dynamic button function, the problem is that I don't know what tags I should use to activate the Jquery.
Basically what I want to do is that when selecting the "concatenate" it shows me the join button and that when selecting "Delete" it shows me the delete button (I have not added this function yet) added to that, that when selecting "concatenate" it hide the delete button and that pressing "Delete" shows me the button to delete.
PS: The clean button is not the same as the delete button. This is my HTML based JavaScript code
<!DOCTYPE html>
<html>
<head>
<title>Unir con salto de linea</title>
<meta charset="UTF-8">
</head>
<body>
<div name="head" class="h">
<table>
<tr>
<form name="prueba" autocomplete="off">
<td><strong>Primera Frase: <input type="text"id="textA" /></td></strong>
<td><strong>Frase final: <input type="text"id="textB" /></td></strong>
<td><select id="sel" required>
<option value="concatenar">Concatenar</option>
<option value="borrar">Borrar</option>
</select></td>
</table>
</form>
</div>
</tr>
<script>
function unirTexto(){
var c1=document.getElementById('textA').value;
var c2=document.getElementById('textB').value;
var t1=document.getElementById('textC').value;
var rt=document.getElementById('resultado');
var copia= document.getElementById('copia');
var p = t1.split(/\n/g);
var resultado = document.getElementById('resultado');
var html = "";
for (var i = 0; i < p.length; i++) {html += c1 +' '+ p[i] +' '+ c2 + "\n"; copia.innerHTML = html; }}
function limpiar() {
document.getElementById('textA').value ="";
document.getElementById('textB').value ="";
document.getElementById('textC').value ="";
document.getElementById('copia').innerHTML ="";
}
</script>
<div name="botons" class="b"><table><tr><td><button onclick="unirTexto()" id="unir">Unir</button>
<button id="borrar">Borrar</button>
<button onclick="limpiar()" id="limpiar">Limpiar</button></td></tr>
</table>
<table>
<tr>
<td><strong>Contenido Medio</strong></td>
<td><strong>Resultado</strong></td>
</tr>
<tr>
<td><textarea name="textC" id="textC" cols="91" rows="33"></textarea></td>
<td><textarea id="copia" type="text" cols="91" rows="33" placeholder="El resultado se mostrará acá"></textarea></td>
</tr>
</table>
</body>
</html>
And this is the code snippet that I don't know where I should put it:
$('#sel').on('change', function() {
$('#' + $(this).val()).prop('disabled', false)
.siblings().prop('disabled', true);
});
$('#sel').on('change', function() {
$('#' + $(this).val()).show()
.siblings().hide();
});
Just add the jquery library inside your tag
<head>
like so:or at the end before finishing the label
<body>
like so:Then you can now include your Jquery code inside your tags
<script>
like so:The first thing you have to do is add the jquery library. After adding the library you can add the code snippet inside your tag
<script>
. In addition to that, I added a function to the ready event, which is executed when the DOM has been loaded, this to show or hide the corresponding buttons according to the selected value of the select in the first instance, that is done through the following code:And for the functionality you want, according to the selected value the buttons are shown or hidden:
The complete code would be: