Delete the word selected by the user from a text

Question

Delete the word selected by the user from a text

Navigation

#1 by (2 votes)

2

This is the only thing I need to finish my project, I need to know how I could remove a phrase that the user enters by keyboard, this by means of a function activated by a button.

I know that a picture is worth a thousand words, so I'll leave a graphic explanation of what I want to happen.

I anticipate that I already know that my erase function is wrong, that's why I ask for help.

And of course, the code I'm using:

<!DOCTYPE html>
<html>
<head>
  <title>Unir con salto de linea</title>
  <meta charset="UTF-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</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="1">Concatenar</option>
  <option value="0">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('respuesta');
  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('respuesta').innerHTML ="";
}
$(document).ready(function() {
 if($(sel).val() == "0") {
  $('#borrar').show();
  $('#unir').hide();
 } else if($(sel).val() == "1") {
  $('#borrar').hide();
  $('#unir').show();
 }
});
$('#sel').on('change', function() {
 if($(this).val() == "0") {
  $('#borrar').show();
  $('#unir').hide();
 } else if($(this).val() == "1") {
  $('#borrar').hide();
  $('#unir').show();
 }
});
function borrarTexto(){
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('respuesta');
  var p = t1.split(/\n/g);
  var resultado = document.getElementById('resultado');
  var html = "";
  for (var i = 0; i < p.length; i++) {html += p[i]+ "\n"; copia.innerHTML = html; }}
  function cambia(){
    document.respuesta.value.split(".").join(",");
}
</script>
<button onclick="unirTexto()" id="unir">Unir</button>
<button onclick="borrarTexto()" id="borrar">Borrar</button>
<button onclick="limpiar()" id="limpiar">Limpiar</button>
<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="respuesta" type="text" cols="91" rows="33" placeholder="El resultado se mostrará acá"></textarea></td>
</tr>
</table>
<br>
</body>
</html>

javascript html

asked by Gabriel 26.09.2018 в 18:30

source

1 answer

Class shows values that do not correspond to the select DDoS attack on ExpressJS

score 2 · Accepted Answer

As you have jQuery included, I assume it's okay to use it

Changes:

I changed where you set the button event.
I changed the for cycle for a .each()

The check is made using the methods of JS startsWith() and endsWith()

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('respuesta');
  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('respuesta').innerHTML ="";
};
function borrarTexto(){

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('respuesta');
  var p = t1.split(/\n/g);
  var html = "";
  var s="";
  $(p).each(function(){
    let s=this;
  	if(s.startsWith(c1)) {
  		s=s.replace(c1,"");
  }
  if(s.endsWith(c2)) {
  		s=s.replace(c2,"");
  }
  	html+=s+"\n";
    
  })
  $("#respuesta").val(html);
 
  }
  
  function cambia(){
    document.respuesta.value.split(".").join(",");
};

$(document).ready(function() {

 if($(sel).val() == "0") {
  $('#borrar').show();
  $('#unir').hide();
 } else if($(sel).val() == "1") {
  $('#borrar').hide();
  $('#unir').show();
 }
 
 $('#sel').change(function() {


 if($(this).val() == "0") {
  $('#borrar').show();
  $('#unir').hide();
 } else if($(this).val() == "1") {
  $('#borrar').hide();
  $('#unir').show();
 }
});

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!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="1">Concatenar</option>
  <option value="0">Borrar</option>
</select></td>
 </table>
</form>
</div>
</tr>

<button onclick="unirTexto()" id="unir">Unir</button>
<button onclick="borrarTexto()" id="borrar">Borrar</button>
<button onclick="limpiar()" id="limpiar">Limpiar</button>
<table>
<tr>
<td><strong>Contenido Medio</strong></td>
<td><strong>Resultado</strong></td>
</tr> 
<tr>
<td><textarea name="textC" id="textC" cols="15" rows="33"></textarea></td>
<td><textarea id="respuesta" type="text" cols="15" rows="33" placeholder="El resultado se mostrará acá"></textarea></td>
</tr>
</table>
<br>
</body>
</html>