程式碼

<input id="myId" value="10V4OjOM" type="text">

解說

input -- 告訴電腦說這是用來「輸入」的
id -- 給此輸入特定的identify
value -- 輸入的預設值(也是顯示於頁面的值)
type -- 輸入的型態，text是文字框(輸入的必須為文字)
*其他型態的type可參考: https://www.w3schools.com/html/html_form_input_types.asp

function goInput(){

     document.getElementById('inputData').style.display = "block"; //id為enter1的button被按下後，id為inputdata的div會顯示

      document.getElementById('enter1').style.display = "none"; //接著id為enter1的button會隱藏

   }

<button id="enter1" //設定button的identify為enter1
onclick="goInput()"> // 被按下(onclick)後執行函式goinput()
   Enter DeviceID</button> // button中的內容為Enter DeviceID

總結: 
1.
document.getElementById('enter1').style.display = "none";
可隱藏Id為enter1的東西(也就是此程式的botton)
若要顯示，則把.display = "none";改為.display = "block";


2.
設定主程式中某物件的id ，也就是<... id=’ ‘></...>
(ex: <button id="enter1"></button>)
便可直接透過getElementById('id名稱')指定到該物件
不論(其實94可以不用管)物件為button或div還是什麼

1

<input id="myId" value="10V4OjOM" type="text">
<button onclick="getNewId()">submit</button>

//步驟1，在文字框(text) 輸入(input) 你的deviceID(value)
設定按下(onclick) submit button後
執行function getNewId( )

2

function getNewId(){

  var newId = document.getElementById('myId');
//步驟2，設定變數 newId的值(value) 是從id為myid的物件拿到的 
       document.getElementById('demo').innerHTML = "Smart DeviceId: " + newId.value;
//把Html中id為demo的部分換成’Smart DeviceId’+ newId的值(value)
.
.
.

    goSmart(); //執行完以上，呼叫function goSmart

}

3

function goSmart(){

 var newId = document.getElementById("myId").value;

//步驟3，設定變數 newId的值(value)屬性 是從id為myid的物件拿到的 

.

.

.

boardReady({board: 'Smart', device: newId , transport: 'mqtt'}, async function (board) {
//把newId變數丟到function裡面，讓function用這個變數去執行接下來的動作