---
tags: JavaScript 實戰班, Day7
---

# 設計魔劍三組

## 6/16：Day 7

漂亮阿姨接收到小明的 "520" 訊息以後，嘗試把 "我只是把你當朋友" 回覆給小明知道，但神邏輯的小明一直誤解這段話的意思：

- 漂亮阿姨回訊：你是一個善良的好人，但我們只是朋友
- 小明解讀：你愛我的善，我喜歡你的良
- 漂亮阿姨回訊：你和我永遠都不會交錯
- 小明解讀：你愛我不會錯，我也會愛你到永遠

雖然很殘忍，但請協助小明理解這段話的意思：

JS 是屬於弱型別的的程式語言，也因為如此在開發上很容易遇到誤會。請撰寫一段 JS 並完成以下條件：

### 任務
1. 取得範例中的 input DOM 元素，並且取得其中的值
2. 將值定義成變數命名為 value
3. 使以下判斷式驗證執行 else 的結果

if (value !== 520) {
  console.log('漂亮阿姨喜歡小明')
} else {
  console.log('漂亮阿姨只是小明的普通朋友')
}

<div id="app">
    <input type="text" value="520" class="a">
    <div class="a"></div>
</div>

範例程式碼：[https://jsbin.com/kucugonuzu/2/edit?html,js](https://jsbin.com/kucugonuzu/2/edit?html,js)

練習重點：

- 取得畫面上的 dom（DOM 結構上取得的都是字串）
- 將字串轉型
---

### Yoyo

let value = +document.querySelector(".a").value;

> 助教回覆：作業做的不錯喔，有成功轉型別，
> 另外提醒一下，下次也記得附上 codepen 或是完整程式碼喔

### Vivian Chaing
[CodePen](https://codepen.io/vivian820225/pen/QWyKrpZ)

var value = parseInt(document.getElementsByClassName('a')[0].value);

> 助教回覆：作業做的很好哦 :smiley:
>

### Jerry

let value = document.querySelector('input').value;
value = parseInt(value);

> 助教回覆：作業做的不錯喔，有成功轉型別，
> 另外提醒一下，下次也記得附上 codepen 或是完整程式碼喔

### Ryan

<div id="app">
    <input type="text" value="520" class="a">
    <div class="a"></div>
</div>

var value = parseInt(document.querySelector('#app input').value);
        
if(value !== 520) {
  console.log('漂亮阿姨喜歡小明')
} else {
  console.log('漂亮阿姨只是小明的普通朋友')
}

>助教回覆：作業做的很好哦 :smiley:
>

### Karen

<div id="app">
    <input type="text" value="520" class="a">
    <div class="a"></div>
</div>

var inputElement = document.getElementsByTagName('input');
var value = Number(inputElement[0].value);
if (value !== 520) {
  console.log('漂亮阿姨喜歡小明')
} else {
  console.log('漂亮阿姨只是小明的普通朋友')
}

>助教回覆：作業做的很好哦 :smiley:

>

### ClareDes.

var value = Number(document.getElementsByTagName("input")[0].value);

> 助教回覆：作業做的不錯喔，有成功轉型別，
> 另外提醒一下，下次也記得附上 codepen 或是完整程式碼喔
>