Mi problema es que tengo mi código JavaScript al cual quiero añadirle Jquery para una función de botones dinámicos, el problema es que no sé que etiquetas debo usar para activar el Jquery.
Básicamente lo que quiero hacer es que al seleccionar el "concatenar" me muestre el botón unir y que al seleccionar "Borrar" me muestre el botón borrar(este aún no le he añadido función) añadido a eso, que al seleccionar "concatenar" se oculte el botón de borrar y que al presionar "Borrar" me muestre el botón para borrar.
Pd: El botón limpiar no es lo mismo que el de borrar. Este es mi código JavaScript con base en HTML
<!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>
Y este es el fragmento de código que no sé en dónde debo colocarlo:
$('#sel').on('change', function() {
$('#' + $(this).val()).prop('disabled', false)
.siblings().prop('disabled', true);
});
$('#sel').on('change', function() {
$('#' + $(this).val()).show()
.siblings().hide();
});
Javascript
yJQuery
son prácticamente lo mismo, con la diferencia que JQuery es un conjunto de librerías Javascript que ayudan a simplificar el desarrollo. Para utilizar JQuery sólo debes importarlo a tu proyecto.. te dejo el link para que comiences a utilizarlo.