Bruno R

Construyendo Funciones

portfolio-next-l5vb64p5k-bandikyu.vercel.app

A la hora de llamar a una funcion por medio de eventos no se colocan los parentesis al final del nombre de la funcion ⇒

btn.onclick = displayMessage; //displayMessage es una funcion ove

En el caso de que la funcion tenga parametros, function displayMessag(msgText, msgType) y queramos llamarla por medio de un evento, ineludiblemente tendria que colocar los parentesis, generando el error antes mencionado 👆, para corregirlo tendria que hacer uso de las fuciones anonimas ⇒

btn.onclick = function() {
    displayMessage('que onda');
  } // aca falta el segundo parametro pero no importa, a efectos practicos se entiende.

La funcion construida en esta seccion MDN ⇒

const btn = document.querySelector('button');
btn.onclick = function() {
    displayMessage('que onda' , 'chat');
  };


function displayMessage(msgText, msgType) {
    const html = document.querySelector('html');

    const panel = document.createElement('div');
    panel.setAttribute('class', 'msgBox');
    html.appendChild(panel);
    
    const msg = document.createElement('p');
    msg.textContent = msgText;
    panel.appendChild(msg);
    
    const closeBtn = document.createElement('button');
    closeBtn.textContent = 'x';
    panel.appendChild(closeBtn);
    
    closeBtn.onclick = function() {
      panel.parentNode.removeChild(panel);
    }
    if (msgType === 'warning') {
        msg.style.backgroundImage = 'url(icons/warning.png)';
        panel.style.backgroundColor = 'red';
      } else if (msgType === 'chat') {
        msg.style.backgroundImage = 'url(icons/chat.png)';
        panel.style.backgroundColor = 'aqua';
      } else {
        msg.style.paddingLeft = '20px';
      }
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Function start</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <button>Display message box</button>
    <script src="script.js"></script>
  </body>
</html>

.msgBox {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 242px;
    background: #eee;
  }

  .msgBox p {
    line-height: 1.5;
    padding: 10px 20px;
    color: #333;
    padding-left: 82px;
    background-position: 25px center;
    background-repeat: no-repeat;
  }

  .msgBox button {
    background: none;
    border: none;
    position: absolute;
    top: 0;
    right: 0;
    font-size: 1.1rem;
    color: #aaa;
  }

Esta funcion lo que hacer es recibir dos argumentos, para sus dos parametros, el primero genera un mensaje a reproducir en un modal (o cuadro de mensaje), y el segundo presenta cual sera el tipo de mensaje, que puede ser "warning" o "chat", con el que se cambia la apariencia de nuestro cuadro de mensaje.