JSFiddle - React, Tailwind, and code Playground

by kazekaze

HTML

<input id="NAME" type="text" onsubmit=BUY() placeholder="輸入用戶姓名"/>
<button class="BUY" onclick="BUY()">我要訂購</button> 
<button class="INTRO" onclick="myFunction02()">認識工廠</button>

CSS

#NAME{
    width: 120px;
    height: 50px;
    cursor:pointer;
    border-radius: 0.5rem;
    font-size: 18px;    
}


.BUY{    
    #position: absolute;
    width: 120px;
    height: 50px;
    #left: 150px;
    #top: 100px;
   
    border-radius: 0.5rem;
    font-size: 22px;
    text-align: center;
    
    background-color: white;
    color: black;
    border: 2px solid #4CAF50;    
  
}


.BUY:hover{
background-color: #00cc66;
}


.INTRO{    
    #position: absolute;

    width: 120px;
    height: 50px;
    #left: 150px;
    #top: 200px;
   
    border-radius: 0.5rem;
    font-size: 22px;
    text-align: center;
    
    background-color: white;
    color: black;
    border: 2px solid blue;    
  
}


.INTRO:hover{
background-color: #6699ff;
}

JavaScript

function BUY()
{
  var Greeting="先生/小姐您好！謝謝您對我們的衣服有興趣！請致電 0987-654-321，會有專人提供您報價！";
  var str = document.getElementById('NAME').value;
  alert(str+Greeting);  


/*
  alert('你點擊了按鈕！');
  var message = '你點擊了按鈕！';
	alert(message);
	var text1 = '恭喜';
	var text2 = '發財';
	alert(text1 + text2);
	alert('萬事' + '如意');
 */
  
}