Interaccionar con la página


  <div id="seccion">
            <h1 id="cabecera">Formulario</h1>
            <input type="text" id="texto">
            <input type="button" onclick="cambiar()" value="pincha">
        </div>

        <script>

            function cambiar() {
                var texto=document.getElementById("texto").value;
                
                document.getElementById("cabecera").innerHTML=texto;
            }

        </script>
		
		    <div id="seccion">
            <h1 id="cabecera">Formulario</h1>
            <input type="text" id="nombre" onkeyup="cambiar()">
            <input type="text" id="apellidos" onkeyup="cambiar()">
            <p id="resultado"></p>
        </div>

        <script>

            function cambiar() {
                var nombre = document.getElementById("nombre").value;
                var apellidos = document.getElementById("apellidos").value;

                document.getElementById("resultado").innerHTML = nombre + " " + apellidos;
            }

        </script>
		
		 <div id="seccion">
            <h1 id="cabecera">Formulario</h1>
            <input type="text" id="nombre" onchange="cambiar()" onfocus="aviso('nombre')">
            <input type="text" id="apellidos" onchange="cambiar()" onfocus="aviso('apellido')">

            <p id="resultado"></p>
            <p id="ayuda"></p>
        </div>

        <script>
            function aviso(texto){
                document.getElementById("ayuda").innerHTML="Introduzca el "+texto;
            }
            function cambiar() {
                var nombre = document.getElementById("nombre").value;
                var apellidos = document.getElementById("apellidos").value;

                document.getElementById("resultado").innerHTML += nombre + " " + apellidos+"<br/>";
            }

        </script>
		
		 <div id="seccion">
            <h1 id="cabecera">Formulario</h1>
            <input type="text" id="nombre" >
            <input type="text" id="apellidos" >

            <p id="resultado"></p>
            <p id="ayuda"></p>
        </div>

        <script>

            document.getElementById("nombre").addEventListener("change", cambiar);

            document.getElementById("apellidos").addEventListener("change", cambiar);

            function cambiar() {
                var nombre = document.getElementById("nombre").value;
                var apellidos = document.getElementById("apellidos").value;

                document.getElementById("resultado").innerHTML += nombre + " " + apellidos + "<br/>";
            }

        </script>
	 <div >
            <h1 >Fibonacci</h1>
            <p>Introduce el número que quieres calcular</p>
            <input type="number" id="numero" >
            <input type="button" id="botoncalcular" value="Calcular">
            <p id="resultado"></p>
        </div>

        <script>
            document.getElementById("botoncalcular").addEventListener("click", calcular);

            function calcular(){
                var numero=parseInt(document.getElementById('numero').value);
                var f=fibonacci(numero);
                document.getElementById('resultado').innerHTML=f.toLocaleString();
            }

            function fibonacci(numero) {
                var a = 0, b = 1, c = 1;
                for (var i = 2; i <= numero; i++) {
                    c = a + b;
                    a = b;
                    b = c;
                }
                return c;
            }
        </script>

Publicado por

Avatar del usuario

Juan Pablo Fuentes

Formador de programación y bases de datos