js para cambiar una imagen por otra

         //js para cambiar una imagen por otra

        document.getElementById("file").addEventListener('change', cambiarImagen);

        function cambiarImagen(event) {

            var file = event.target.files[0];

            var reader = new FileReader();

            reader.onload = (event) => {

                document.getElementById("picture").setAttribute('src', event.target.result);

            };

            reader.readAsDataURL(file);

        }

Información importante usando el Framework Svelte

Instalar Svelte   usando rollup

Mkdir  nomcarpeta

npx degit sveltejs/template svelte

cd nomcarpeta

npm install

npm run dev, alli copiamos la url para  testear la app

Instalar Svelte   usando webpack

Mkdir  nomcarpeta

npm install svelte --save

npm install @babel/core @babel/preset-env @babel/polyfill babel-loader --save-dev   

npm install webpack webpack-cli html-webpack-plugin --save-dev

npm install webpack-dev-server --save-dev

npm install svelte-loader --save-dev

npm run build

npm run start

Crear un proyecto usando Svelte

Mkdir  nombrecarpeta

cd nombrecarpeta

git init

npm init

Code .

Creamos carpeta src  donde va el código de nuestro programa, aquí dentro creamos index.js

Creamos carpeta public

Cómo convertir automaticamente en mayúscula las letras en Javascript

Hay casos en los que queremos que en javascript solo la persona pueda escribir letras en un campo de formulario, con el siguiente código se convierte automáticamente las letras minúsculas en mayúsculas:

   obj.value = obj.value.replace(/[^A-Z-a-z]/g,'').toUpperCase();

Cómo dar sonido a un Botón en html con javascript

Es común ver que las páginas usan sonidos al hacer click en botones y esto hace que mejore la experiencia de usuario y para esto podemos usar el siguiente código:

<button  class="sonido">Nombre_Boton</button>

  <audio src=""></audio>

<script>

    let boton = document.querySelector(".sonido")

    let audioEtiqueta = document.querySelector("audio")

    boton.addEventListener("click", () => {

      audioEtiqueta.setAttribute("src", "nombre_del_audio")

      audioEtiqueta.play()

      console.log(`Reproduciendo: ${audioEtiqueta.src}`)

    })

</script>

Como Crear un checkbox dinámico que al hacer click despliegue un campo para escribir un texto

Hay ocasiones en las que usamos checkbox para que nuestros formularios sean dinámicos y permitan escoger varias o una opción, En este caso quiero mostrarles una ayuda para que al hacer click en un checkbox, automáticamente se despliegue un input para que las personas escriban un texto

<script>

function miFuncion() {

  var checkBox = document.getElementById("miFuncion");

  var text = document.getElementById("texto");

  if (checkBox.checked == true){

    text.style.display = "block";

  } else {

     text.style.display = "none";

  }

}

</script>

Escribe otra opción: <input type="checkbox" name="check1"  value="1"  id="miFuncion"  onclick="myFunction()"/>  

         

            <input type="text" id="texto" name="ocupac" placeholder="Cual" style="display:none"  />   

Código basado en W3schools.