JSFiddle - React, Tailwind, and code Playground

by amatiasq

HTML

<input type="text" id="alert-message" placeholder="Mensaje para el alert" />
<span id="alert-output"></span>
<button id="alert">Alert</button>

<input type="text" id="confirm-message" placeholder="Mensaje para el confirm" />
<span id="confirm-output"></span>
<button id="confirm">Confirm</button>

<input type="text" id="prompt-message" placeholder="Mensaje para el prompt" />
<span id="prompt-output"></span>
<button id="prompt">Prompt</button>

CSS

input, span {
    width: 80%;
    padding: 7px;
    display: block;
}

button {
    margin: 5px 0 30px;
}

JavaScript

[   'alert',
    'confirm',
    'prompt',
].forEach(function(type) {
    var input = document.getElementById(type + '-message');
    var button = document.getElementById(type);
    var output = document.getElementById(type + '-output');
 
    button.addEventListener('click', function() {
        var result = window[type](input.value);
        output.innerHTML = 'La función devolvió: ' + result;
    })
});