JSFiddle - React, Tailwind, and code Playground

by borisjavier

HTML

<form id="dataForm" name="dataForm" method="post" action="index.php" enctype="application/x-www-form-urlencoded">
    <div>
        <input type="hidden" name="dataType" id="dataType" value="" />
        <ul class="tab-headers" id="myul">
            <li id="tab-header1">Text <input type="hidden" value="sopas Text"></li>
            <li id="tab-header2" class="active">Email <input type="hidden" value="sopas Email"></li>
            <li id="tab-header3">URL <input type="hidden" value="sopas URL"></li>
        </ul>
    </div>
    <input type="text" id="output" value="">
</form>

CSS

.active {
  color: red;
}

JavaScript

var ul = document.getElementById('myul') 
var output = document.getElementById('output')  
for(let i=1; i <= ul.childNodes.length; i++)
{
let troi = document.getElementById('tab-header'+i);
troi.onclick = function() {
  // onclick stuff
  //alert(troi.innerHTML)
  //let titanium = troi.innerHTML;
  //titanium.
  output.value = troi.innerHTML; 

}
}