JSFiddle - React, Tailwind, and code Playground

by mtambulut

HTML

<form>
  <select id="mySelect" size="8">
    <option>Apple</option>
    <option>Pear</option>
    <option>Banana</option>
    <option>Orange</option>
  </select>
</form>

<button type="button" id="myelement">Insert option before selected</button>

CSS

/*
//FOUC önlemek için

What I've done to avoid FOUC is:

Set the body section as: <body style="visibility: hidden;" onload="js_Load()">
Write a js_Load() JavaScript function: document.body.style.visibility='visible';

With this approach the body of my web page is kept hidden until the full page and CSS files are loaded. Once everything is loaded, the onload event turns the body visible. So, the web browser remains empty until a point when everything pops up on the screen.

It is a simple solution but so far it is working.

veya ; 

<html>
  <head>
  <!-- Other stuff like title and meta tags go here -->
  <style type="text/css">
    .hidden {display:none;}
  </style>
  <script type="text/javascript" src="/scripts/jquery.js"></script>
  <script type="text/javascript">
    $('html').addClass('hidden');
    $(document).ready(function() {
      $('html').show();  // EDIT: Can also use $('html').removeClass('hidden'); 
     });  
   </script>
   </head>
   <body>
   <!-- Body Content -->
   </body>
</html>
*/

JavaScript

var foo = 10 + "20";
console.log(foo);

//

var myEl = document.getElementById('myelement');

myEl.addEventListener('click', function() {
      var x = document.getElementById("mySelect");
      
    if (x.selectedIndex >= 0) {
        var option = document.createElement("option");
        option.text = "Kiwi";
        var sel = x.options[x.selectedIndex];  
        x.add(option, sel);
    }
    
}, false);

//

/*
  function myFunction() {
      var x = document.getElementById("mySelect");
      if (x.selectedIndex >= 0) {
          var option = document.createElement("option");
          option.text = "Kiwi";
          var sel = x.options[x.selectedIndex];  
          x.add(option, sel);
      }
  }
*/