Insertar un elemento en una array sustituyendo al que esta (splice())

Este código crea un array en JavaScript y sustitye un elemento del array por otro. Aunque esto se puede hacer directamente, la idea es tener un ejemplo de la función splice() de JavaScript, que inserta unos elementos dentro de la tabla y puede eliminar otros.

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];

// En la posicion 2, añade 2 elementos, y quita 1: 
fruits.splice(2, 1, "Lemon", "Kiwi");

document.getElementById("demo").innerHTML = fruits; //Banana,Orange,Lemon,Kiwi,Mango
</script>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>4.7</title>
</head>

<body>
    <h1>4.7 Inserta un nuevo elemento del array en un sitio determinado quitando el que está</h1>
    <p>Introduce los primeros enteros separados por comas: </p>
    <input type="text" placeholder="Array" id="array">
    <p>
    Valor: <input type="text" placeholder="Texto a añadir" id="valor">
    Posición del Array: <input type="number" placeholder="posición" id="posicion">

          <input type="button" value="Sustituir" onclick="sustituir()">
    </p>
  
    <input type="button" value="Reiniciar" onclick="reiniciar()">
    <p id="resultado"></p>
    
  <script>
  var array=[], tmp=0;

  function sustituir()
  {
      array=document.getElementById("array").value.split(/,/);
      var posicion=document.getElementById("posicion").value;
      var valor=document.getElementById("valor").value;

      array.splice(posicion-1,1,valor);

//      document.getElementById("resultado").innerHTML=array;
      array.forEach(muestra);
  }
  function muestra(ele,ind,arr){
    document.getElementById("resultado").innerHTML = document.getElementById("resultado").innerHTML +"Ind:"+ ind + " elemento: " + ele + "<br>";
  }
  function reiniciar()
  {
        location.reload();
  }
  
  </script>
  </body>

</html>

Entradas relacionadas

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *