不可重新賦予新值
可重新賦予新值
建立常數a並儲存(或設定)“david”cost a = “david”;
先上範例圖：
程式碼：
HTML：
<body>
<h1>自我介紹產生器</h1>
<input type="text" id="nameInput" placeholder="名字...">
<button id="btn">產生自我介紹</button>
<script src="/main.js"></script>
</body>
JavaScript：
const nameInput = document.getElementById("nameInput");
const btn = document.getElementById("btn");
//綁定按鈕的點擊事件
btn.addEventListener("click", function () {
//btn被點擊後才做的事情
console.log("Heloo" + nameInput.value);
})
寫法如下：
HTML：
<div class="container">
<h1>自我介紹產生器</h1>
<input class="form-control" type="text" id="nameInput" placeholder="名字...">
<br>
<input class="form-control" type="text" id="ageInput" placeholder="年齡...">
<br>
<input class="form-control" type="text" id="titleInput" placeholder="職稱...">
<button class="btn btn-primary" id="btn">產生自我介紹</button>
<div id="introBlock"></div>
<script src="/main.js"></script>
</div>
JavaScript：
const nameInput = document.getElementById("nameInput");
const ageInput = document.getElementById("ageInput");
const titleInput = document.getElementById("titleInput");
const btn = document.getElementById("btn");
const introBlock = document.getElementById("introBlock");
//綁定按鈕的點擊事件
btn.addEventListener("click", function () {
//btn被點擊後才做的事情
const name = nameInput.value;
const age = ageInput.value;
const title = titleInput.value;
introBlock.innerText = "hello 我是" + name + "是一個" + age + "歲的" + title + "。";
})
把
introBlock.innerText = "hello 我是" + name + "是一個" + age + "歲的" + title + "。";
改成
introBlock = `Hello 我是${name}是一個${age}歲的${title}`;
這樣程式碼較簡潔也不會那麼長
如果要加上 html 的標籤則改成
introBlock.innerHTML = `<h1>Hello</h1>
<h2>我是${name}是一個${age}歲的${title}`</h2>;
iThome鐵人賽
看影片追技術