Untitled

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <form name="myForm"
    onsubmit="return butForm()" method="post"
   > Name: <input type="text" name="fname">
    <input type="Submit" value="Submit">
   </form>
  <p id="output">hi</p>


  <h2> EX2 </h2>
  <input id="text2" type="number" min="0" max="100" required >
  <button id="in" onclick="funcIn()"> IN</button>
  <p id="outputIs" >here</p>

  <button id="findMax" onclick="findMaxx(23,12,99)" > max is </button>
  <p id="maxIs" >max here</p>

  <form id="frm1" action="/action_page.php">
    Username: <input type="text" value="diep"><br>
    Password: <input type="text" value="pass"><br>
    <input type="submit" value="SUBMIT"><br><br>
  </form>
  <p id="showEleValue">value here</p>
  <button id="elementValue" onclick="eleValue()">eleValue</button>

  <p id="useCSS" >using CSS change font, color</p>
  <button onclick="changeCSS()">CHANGE</button><br>
  <input type="button" value="Hide Text" onclick="document.getElementById('useCSS').style.visibility='hidden'">
  <input type="button" value="Visible Text" onclick="document.getElementById('useCSS').style.visibility='visible'">


<script id="jsbin-javascript">
function butForm(){
  var x=document.forms["myForm"]["fname"].value;
  if(x=="test"){
    document.getElementById("output").innerHTML="true";
    return alert("Xin chao!");
  }
  else {
   document.getElementById("output").innerHTML="false";
  }
}

function funcIn(){      // Input
  var x=document.getElementById("text2").value;
  var text;
  if(isNaN(x)||x<1||x>10){
    text="INPUT again";
  }
  else {
    text="OK";
  }
  document.getElementById("outputIs").innerHTML=text;
}

function findMaxx(){   //Tìm max bằng cách gọi arguments
  var max=0;
  for (var i=0; i<arguments.length;i++){
    if(arguments[i]>max){
      max=arguments[i];
    }
  }
  document.getElementById("maxIs").innerHTML=max;
}

  function eleValue(){    //Sử dụng element value
  var x=document.forms["frm1"];
  var temp="";
  for(var i=0;i< x.length;i++){
    temp+=x.elements[i].value+"<br>";
  }
   document.getElementById("showEleValue").innerHTML=temp;
}


function changeCSS(){
  var x=document.getElementById("useCSS").style;
  x.fontSize="40px";
  x.color='green';
}
</script>


<script id="jsbin-source-javascript" type="text/javascript">function butForm(){
  var x=document.forms["myForm"]["fname"].value;
  if(x=="test"){
    document.getElementById("output").innerHTML="true";
    return alert("Xin chao!");
  }
  else {
   document.getElementById("output").innerHTML="false";
  }
}

function funcIn(){      // Input
  var x=document.getElementById("text2").value;
  var text;
  if(isNaN(x)||x<1||x>10){
    text="INPUT again";
  }
  else {
    text="OK";
  }
  document.getElementById("outputIs").innerHTML=text;
}

function findMaxx(){   //Tìm max bằng cách gọi arguments
  var max=0;
  for (var i=0; i<arguments.length;i++){
    if(arguments[i]>max){
      max=arguments[i];
    }
  }
  document.getElementById("maxIs").innerHTML=max;
}

  function eleValue(){    //Sử dụng element value
  var x=document.forms["frm1"];
  var temp="";
  for(var i=0;i< x.length;i++){
    temp+=x.elements[i].value+"<br>";
  }
   document.getElementById("showEleValue").innerHTML=temp;
}


function changeCSS(){
  var x=document.getElementById("useCSS").style;
  x.fontSize="40px";
  x.color='green';
}


</script></body>
</html>