javascriptでボタンが機能しない

前提・実現したいこと

javascriptでボタンを押した時に入力した適当な文字が
適切に表示されるようにしたい。

発生している問題・エラーメッセージ

[object HTMLInputElement]

エラーメッセージ
[object HTMLInputElement]

HTML
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <title>ソガリチョイス</title>
6    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
7    <link rel="stylesheet" href="styles.css">
8  </head>
9
10  <body>
11    <div class="container">
12      <h1>ソガリチョイス!</h1>
13      <img class="image131" src="image131-960x512.jpg" alt="">
14    </div>
15
16    <div class="main-top">
17      <h2>やりたいことを入力すると</h2>
18      <h3>ソガリがどちらを選ぶべきか選んでくれます!</h3>
19    </div>
20

<div class="main-input"> <input type="text" id="do1" placeholder="やりたいこと1"> <input type="text" id="do2" placeholder="やりたいこと2"> <div id ="btn">決めてもらう</div> </div>

<div class="main-result">
  <p id="result" value=""> ここに結果を表示します</p>
  <p id="reset" class="hidden">もう一度やる</p>
</div>

    <script src="main.js"></script>
  </body>
</html>

```JavaScript
ソースコード
(function(){
  'use strict';

var btn = document.getElementById('btn');
var do1 = document.getElementById('do1');
var do2 = document.getElementById('do2');
var result = document.getElementById('result');
var reset = document.getElementById('reset');

btn.addEventListener('mousedown',function(){
  this.className = 'push';
});

btn.addEventListener('mouseup',function(){
  this.className = '';
});

btn.addEventListener('click',function(){
  var choise = [do1,do2];
  var n = Math.floor(Math.random()*choise.length);
  result.textContent = choise[n];
  reset.classList.remove('hidden');
});

reset.addEventListener('click',function(){
  result.textContent = 'ここに結果を表示します!';
  do1.value = '';
  do2.value = '';
  do1.focus();
});

//do1.focus();
})();


### 試したこと
btn.addEventListener('click',function(){
  var choise = [do1,do2];
  var n = Math.floor(Math.random()*choise.length);
  result.textContent = choise[n];
  reset.classList.remove('hidden');
});
の部分の値を変えてみたり式を模索してみたり何度もトライしましたが
画面に適切に表示されません。

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

kei344

2019/01/02 08:56

（質問文は編集できます）質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

kei344

2019/01/02 09:38

'''（カンマ3つ）ではなく ```（バッククオート3つ）です。記入エリアの右部分あたりにリアルタイムに結果が表示されていると思うので、そこを見ながら調整してください。コードブロックの開始部分を「```HTML」「```JavaScript」にすると言語にあわせたコードハイライトも利用出来ます。

gutimitsu

2019/01/02 09:49

大変申し訳ありませんでした。以後、```バックオートで記載します。よろしくお願いします。

kei344

2019/01/02 09:51 編集

コードがかなりコードブロックから漏れていますよ。

行動規範の内容に同意します

回答1件

ベストアンサー

配列に入っているのはDOM要素なので、値を取り出す必要が有ります。

JavaScript
1// result.textContent = choise[n];
2//                                ↓
3   result.textContent = choise[n].value;
4```**動くサンプル：**[https://jsfiddle.net/f214ypdu/](https://jsfiddle.net/f214ypdu/)
5
6---
7
8適切にインデントしたほうが問題を見つけやすいですよ。
9
10【Online JavaScript beautifier】
11[https://beautifier.io/](https://beautifier.io/)