Skip to main content
se eliminaron 32 caracteres en el cuerpo
Origen Enlace
Pablo Lozano
  • 49.9k
  • 8
  • 55
  • 92

html:

<input type="button" value="Abrir" id="abre">
    <input type="button" value="elegir color" id="colores">
    <span id="nombrecolor">#E8347D</span>
    <input type="button" value="horario" id="horario">
    <h2 id="imprimir"></h2>

javascript:

window.onload = function(){
    document.getElementById("abre").onclick = abrir;
    document.getElementById("colores").onclick = generarcolor;
    document.getElementById("horario").onclick = horario;
}

console.log(onload);

var ventana;

function abrir() {
    console.log(abrir);
    ventana = window.open("", "new_window", "width=800,height=500,status=no,toolbar=no,menubar=no");
    contar();
}

window.onload = contar //para que cuando 
var contartiempo = Math.floor(Math.random() * 100);

console.log(abrir);

function contar() {
    if (ventana) {
        ventana.document.write(" <span id = contador></span>") //quiero que se muestre en la ventana abierta el contador
        ventana.document.getElementById('contador').innerHTML = contartiempo;
        if (contartiempo == 0) {
            ventana.close();
            window.location.reload();
        } else {
            contartiempo -= 1;
            setTimeout("contar()", 1000);
        }

    }
}
console.log(contar);

function generarcolor() {

    var simbolo = "1234567890ABCDEF";

    var color = "#";
    for (let i = 0; i < 6; i++) {

        color = color + simbolo[Math.floor(Math.random() * 16)];

    }

    document.body.style.background = color;
    document.getElementById("nombrecolor").innerHTML = color;
}
console.log(generarcolor);


function horario() {

    const hoy = new Date();
    let h = hoy.getHours();
    let m = hoy.getMinutes();
    let s = hoy.getSeconds();
    m = comprobar(m);
    s = comprobar(s);


    var fecha = new Date();
    var dia_semana = [
        "Domingo",
        "Lunes",
        "Martes",
        "Miércoles",
        "Jueves",
        "Viernes",
        "Sabado"
    ];

    var mes = [
        "Enero",
        "Febrero",
        "Marzo",
        "Abril",
        "Mayo",
        "Junio",
        "Julio",
        "Agosto",
        "Septiembre",
        "Octubre",
        "Noviembre",
        "Diciembre"
    ];

    var obtener_fecha=  dia_semana[fecha.getDay()] + ", " +fecha.getDate() + " de "+mes[fecha.getMonth()]+ " del " + fecha.getFullYear();



    document.getElementById('imprimir').innerHTML = h + ":" + m + ":" + s +" - " +obtener_fecha ;
    setTimeout(horario, 1000);
}

function comprobar(i) {
    if (i < 10) {
        i = "0" + i
    }; //añade cero delante de los numeros mayores de 10
    return i;//La sentencia return finaliza la ejecución de la función y especifica un valor para ser devuelto a quien llama a la función.
}
<input type="button" value="Abrir" id="abre">
<input type="button" value="elegir color" id="colores">
<span id="nombrecolor">#E8347D</span>
<input type="button" value="horario" id="horario">
<h2 id="imprimir"></h2>
window.onload = function(){
    document.getElementById("abre").onclick = abrir;
    document.getElementById("colores").onclick = generarcolor;
    document.getElementById("horario").onclick = horario;
}

console.log(onload);


var ventana;

function abrir() {
    console.log(abrir);
    
    
    ventana = window.open("", "new_window", "width=800,height=500,status=no,toolbar=no,menubar=no");

    contar();
}
window.onload = contar //para que cuando 
var contartiempo = Math.floor(Math.random() * 100);

console.log(abrir);


function contar() {
    if (ventana) {

        ventana.document.write(" <span id = contador></span>") //quiero que se muestre en la ventana abierta el contador
        ventana.document.getElementById('contador').innerHTML = contartiempo;
        if (contartiempo == 0) {
            ventana.close();
            window.location.reload();
        } else {
            contartiempo -= 1;
            setTimeout("contar()", 1000);
        }

    }
}
console.log(contar);


function generarcolor() {

    var simbolo = "1234567890ABCDEF";

    var color = "#";
    for (let i = 0; i < 6; i++) {

        color = color + simbolo[Math.floor(Math.random() * 16)];

    }

    document.body.style.background = color;
    document.getElementById("nombrecolor").innerHTML = color;
}
console.log(generarcolor);


function horario() {

    const hoy = new Date();
    let h = hoy.getHours();
    let m = hoy.getMinutes();
    let s = hoy.getSeconds();
    m = comprobar(m);
    s = comprobar(s);


    var fecha = new Date();
    var dia_semana = [
        "Domingo",
        "Lunes",
        "Martes",
        "Miércoles",
        "Jueves",
        "Viernes",
        "Sabado"
    ];

    var mes = [
        "Enero",
        "Febrero",
        "Marzo",
        "Abril",
        "Mayo",
        "Junio",
        "Julio",
        "Agosto",
        "Septiembre",
        "Octubre",
        "Noviembre",
        "Diciembre"
    ];

    var obtener_fecha=  dia_semana[fecha.getDay()] + ", " +fecha.getDate() + " de "+mes[fecha.getMonth()]+ " del " + fecha.getFullYear();

   
    
    document.getElementById('imprimir').innerHTML = h + ":" + m + ":" + s +" - " +obtener_fecha ;
    setTimeout(horario, 1000);
}

function comprobar(i) {
    if (i < 10) {
        i = "0" + i
    }; //añade cero delante de los numeros mayores de 10
    return i;//La sentencia return finaliza la ejecución de la función y especifica un valor para ser devuelto a quien llama a la función.
}
 

html:

<input type="button" value="Abrir" id="abre">
    <input type="button" value="elegir color" id="colores">
    <span id="nombrecolor">#E8347D</span>
    <input type="button" value="horario" id="horario">
    <h2 id="imprimir"></h2>

javascript:

window.onload = function(){
    document.getElementById("abre").onclick = abrir;
    document.getElementById("colores").onclick = generarcolor;
    document.getElementById("horario").onclick = horario;
}

console.log(onload);


var ventana;

function abrir() {
    console.log(abrir);
    
    
    ventana = window.open("", "new_window", "width=800,height=500,status=no,toolbar=no,menubar=no");

    contar();
}
window.onload = contar //para que cuando 
var contartiempo = Math.floor(Math.random() * 100);

console.log(abrir);


function contar() {
    if (ventana) {

        ventana.document.write(" <span id = contador></span>") //quiero que se muestre en la ventana abierta el contador
        ventana.document.getElementById('contador').innerHTML = contartiempo;
        if (contartiempo == 0) {
            ventana.close();
            window.location.reload();
        } else {
            contartiempo -= 1;
            setTimeout("contar()", 1000);
        }

    }
}
console.log(contar);


function generarcolor() {

    var simbolo = "1234567890ABCDEF";

    var color = "#";
    for (let i = 0; i < 6; i++) {

        color = color + simbolo[Math.floor(Math.random() * 16)];

    }

    document.body.style.background = color;
    document.getElementById("nombrecolor").innerHTML = color;
}
console.log(generarcolor);


function horario() {

    const hoy = new Date();
    let h = hoy.getHours();
    let m = hoy.getMinutes();
    let s = hoy.getSeconds();
    m = comprobar(m);
    s = comprobar(s);


    var fecha = new Date();
    var dia_semana = [
        "Domingo",
        "Lunes",
        "Martes",
        "Miércoles",
        "Jueves",
        "Viernes",
        "Sabado"
    ];

    var mes = [
        "Enero",
        "Febrero",
        "Marzo",
        "Abril",
        "Mayo",
        "Junio",
        "Julio",
        "Agosto",
        "Septiembre",
        "Octubre",
        "Noviembre",
        "Diciembre"
    ];

    var obtener_fecha=  dia_semana[fecha.getDay()] + ", " +fecha.getDate() + " de "+mes[fecha.getMonth()]+ " del " + fecha.getFullYear();

   
    
    document.getElementById('imprimir').innerHTML = h + ":" + m + ":" + s +" - " +obtener_fecha ;
    setTimeout(horario, 1000);
}

function comprobar(i) {
    if (i < 10) {
        i = "0" + i
    }; //añade cero delante de los numeros mayores de 10
    return i;//La sentencia return finaliza la ejecución de la función y especifica un valor para ser devuelto a quien llama a la función.
}

window.onload = function(){
    document.getElementById("abre").onclick = abrir;
    document.getElementById("colores").onclick = generarcolor;
    document.getElementById("horario").onclick = horario;
}

console.log(onload);

var ventana;

function abrir() {
    console.log(abrir);
    ventana = window.open("", "new_window", "width=800,height=500,status=no,toolbar=no,menubar=no");
    contar();
}

window.onload = contar //para que cuando 
var contartiempo = Math.floor(Math.random() * 100);

console.log(abrir);

function contar() {
    if (ventana) {
        ventana.document.write(" <span id = contador></span>") //quiero que se muestre en la ventana abierta el contador
        ventana.document.getElementById('contador').innerHTML = contartiempo;
        if (contartiempo == 0) {
            ventana.close();
            window.location.reload();
        } else {
            contartiempo -= 1;
            setTimeout("contar()", 1000);
        }

    }
}
console.log(contar);

function generarcolor() {

    var simbolo = "1234567890ABCDEF";

    var color = "#";
    for (let i = 0; i < 6; i++) {

        color = color + simbolo[Math.floor(Math.random() * 16)];

    }

    document.body.style.background = color;
    document.getElementById("nombrecolor").innerHTML = color;
}
console.log(generarcolor);


function horario() {

    const hoy = new Date();
    let h = hoy.getHours();
    let m = hoy.getMinutes();
    let s = hoy.getSeconds();
    m = comprobar(m);
    s = comprobar(s);


    var fecha = new Date();
    var dia_semana = [
        "Domingo",
        "Lunes",
        "Martes",
        "Miércoles",
        "Jueves",
        "Viernes",
        "Sabado"
    ];

    var mes = [
        "Enero",
        "Febrero",
        "Marzo",
        "Abril",
        "Mayo",
        "Junio",
        "Julio",
        "Agosto",
        "Septiembre",
        "Octubre",
        "Noviembre",
        "Diciembre"
    ];

    var obtener_fecha=  dia_semana[fecha.getDay()] + ", " +fecha.getDate() + " de "+mes[fecha.getMonth()]+ " del " + fecha.getFullYear();



    document.getElementById('imprimir').innerHTML = h + ":" + m + ":" + s +" - " +obtener_fecha ;
    setTimeout(horario, 1000);
}

function comprobar(i) {
    if (i < 10) {
        i = "0" + i
    }; //añade cero delante de los numeros mayores de 10
    return i;//La sentencia return finaliza la ejecución de la función y especifica un valor para ser devuelto a quien llama a la función.
}
<input type="button" value="Abrir" id="abre">
<input type="button" value="elegir color" id="colores">
<span id="nombrecolor">#E8347D</span>
<input type="button" value="horario" id="horario">
<h2 id="imprimir"></h2>
 

Origen Enlace
kkk
  • 109
  • 7

¿Como hacer funcionar un onclick poniendo todo el codigo en javascript?

Hola tengo me gustaría dejar todo el html sin apenas código javascript como mucho el código que una la pagina de html y javascript, pero tengo la duda de si se podía hacer que todo el código del uso de onclick se pudiera hacer solo en javascript y solo poniendo el id en los inputs correspondientes para llamar a la función. De momento le doy al boton y no funciona, pero tampoco da ningún error, directamente es como si no lo reconociese. Dicho esto aqui dejo el codigo html y javacript

html:

<input type="button" value="Abrir" id="abre">
    <input type="button" value="elegir color" id="colores">
    <span id="nombrecolor">#E8347D</span>
    <input type="button" value="horario" id="horario">
    <h2 id="imprimir"></h2>

javascript:

window.onload = function(){
    document.getElementById("abre").onclick = abrir;
    document.getElementById("colores").onclick = generarcolor;
    document.getElementById("horario").onclick = horario;
}

console.log(onload);


var ventana;

function abrir() {
    console.log(abrir);
    
    
    ventana = window.open("", "new_window", "width=800,height=500,status=no,toolbar=no,menubar=no");

    contar();
}
window.onload = contar //para que cuando 
var contartiempo = Math.floor(Math.random() * 100);

console.log(abrir);


function contar() {
    if (ventana) {

        ventana.document.write(" <span id = contador></span>") //quiero que se muestre en la ventana abierta el contador
        ventana.document.getElementById('contador').innerHTML = contartiempo;
        if (contartiempo == 0) {
            ventana.close();
            window.location.reload();
        } else {
            contartiempo -= 1;
            setTimeout("contar()", 1000);
        }

    }
}
console.log(contar);


function generarcolor() {

    var simbolo = "1234567890ABCDEF";

    var color = "#";
    for (let i = 0; i < 6; i++) {

        color = color + simbolo[Math.floor(Math.random() * 16)];

    }

    document.body.style.background = color;
    document.getElementById("nombrecolor").innerHTML = color;
}
console.log(generarcolor);


function horario() {

    const hoy = new Date();
    let h = hoy.getHours();
    let m = hoy.getMinutes();
    let s = hoy.getSeconds();
    m = comprobar(m);
    s = comprobar(s);


    var fecha = new Date();
    var dia_semana = [
        "Domingo",
        "Lunes",
        "Martes",
        "Miércoles",
        "Jueves",
        "Viernes",
        "Sabado"
    ];

    var mes = [
        "Enero",
        "Febrero",
        "Marzo",
        "Abril",
        "Mayo",
        "Junio",
        "Julio",
        "Agosto",
        "Septiembre",
        "Octubre",
        "Noviembre",
        "Diciembre"
    ];

    var obtener_fecha=  dia_semana[fecha.getDay()] + ", " +fecha.getDate() + " de "+mes[fecha.getMonth()]+ " del " + fecha.getFullYear();

   
    
    document.getElementById('imprimir').innerHTML = h + ":" + m + ":" + s +" - " +obtener_fecha ;
    setTimeout(horario, 1000);
}

function comprobar(i) {
    if (i < 10) {
        i = "0" + i
    }; //añade cero delante de los numeros mayores de 10
    return i;//La sentencia return finaliza la ejecución de la función y especifica un valor para ser devuelto a quien llama a la función.
}