3

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

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>

2 respuestas 2

2

Estas sobre escribiendo onload con esta linea:

window.onload = contar //para que cuando

Comentala y todo funcionara bien.

window.onload = function() {
 
  document.getElementById("abre").onclick = abrir;
  document.getElementById("colores").onclick = generarcolor;
  document.getElementById("horario").onclick = horario;
  
  //Aqui deberia ir contar
  contar()
}

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();
}

//Estas sobreescribiendo el onload con esta linea. 
//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>

1
  • Muchas gracias, no habia caido en que solo se puede o debe poner un onload.
    – kkk
    el 22 nov. 2021 a las 19:51
1

La respuesta de Legna ya te da la solución a tu problema, pero por completitud me gustaría añadir que ese problema se quitaría si en lugar de usar elemento.on... = function(...) {...} para asignar "observadores de eventos", podrías usar addEventListener, ya que permite asignar más de uno sin problemas:

const button = document.querySelector('button');

function hazAlgo() {
  console.log('click detectado');
  contador++;
}

let contador = 0;
function hazAlgoMas() {
  document.querySelector('p').innerText = `Clickado ${contador} veces`;
}

button.addEventListener('click', hazAlgo);
button.addEventListener('click', hazAlgoMas);
<button>Click aquí</button>
<p>Texto inicial</p>

1
  • Ok, muchas gracias por le consejo
    – kkk
    el 22 nov. 2021 a las 19:51

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.