JSFiddle - React, Tailwind, and code Playground

by Peter

HTML

<form id="test-form" method="post">
   <div class="form-group">
       <label for="file-input">Test File Input</label>
       <input id="file-input" name="file-input" type="file" />
   </div>
    
    <div class="form-group">
        <label for="date-input">Test Date Input</label>
       <input id="date-input" name="date-input" type="date" />
   </div>
    
    <div class="form-group">
        <label for="text-input">Text Text Input</label>
       <input id="text-input" name="text-input" placeholder="Enter text..." type="text" />
   </div>
    
    <div class="form-group">
        <label for="colour-input">Test Colour Input</label>
        <input id="colour-input" name="colour-input" type="color" />
   </div>
    
    <div class="form-group">
        <label for="checkbox-input">Test Checkbox Input</label>
        <input id="checkbox-input" name="checkbox-input" type="checkbox" />
   </div>
    
    <p id="test-paragraph">Some text that wouldn't normally go anything when clicked on</p>
</form>

<div class="controls-group">
    <button id="click-file" type="button">Click File</button>
    
    <button id="click-date" type="button">Click Date</button>
    
    <button id="click-text" type="button">Click Text Input</button>
    
    <button id="click-colour" type="button">Click Colour</button>
    
    <button id="click-checkbox" type="button">Click Checkbox</button>
    
    <button id="click-paragraph" type="button">Click Paragraph</button>
</div>

CSS

.form-group {
    margin: 1em 0;
}

.form-group label {
    display: inline-block; 
    min-width: 8em;
    padding-right: 1em;
}

.controls-group {
    border: 1px solid #ff0000;
    padding: 0.25em 1em;
}

JavaScript

function clickElement(elementId) {
    var domElement = document.getElementById(elementId);
    
    if (domElement && typeof(domElement.click) === "function")
    {
        domElement.click();
    }    
}

(function () {
    var fileButton = document.getElementById('click-file');
    
    if (fileButton && 'addEventListener' in fileButton) {
        fileButton.addEventListener('click', function () {
            clickElement('file-input');                                    
        });
    }
    
    var dateButton = document.getElementById('click-date');
    
    if (dateButton && 'addEventListener' in dateButton) {
        dateButton.addEventListener('click', function () {
            clickElement('date-input');                                    
        });
    }
    
    var textButton = document.getElementById('click-text');
    
    if (textButton && 'addEventListener' in textButton) {
        textButton.addEventListener('click', function () {
            clickElement('text-input');                                    
        });
    }
    
    var colourButton = document.getElementById('click-colour');
    
    if (colourButton && 'addEventListener' in colourButton) {
        colourButton.addEventListener('click', function () {
            clickElement('colour-input');                                    
        });
    }
    
    var checkboxButton = document.getElementById('click-checkbox');
    
    if (checkboxButton && 'addEventListener' in checkboxButton) {
        checkboxButton.addEventListener('click', function () {
            clickElement('checkbox-input');                                    
        });
    }
    
    var paragraphButton = document.getElementById('click-paragraph');
    
    if (paragraphButton && 'addEventListener' in paragraphButton) {
        paragraphButton.addEventListener('click', function () {
            clickElement('test-paragraph');                                    
        });
    }
    
    var testParagraph =...