質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.06%

javascriptでボタンが機能しない

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 764

gutimitsuguti

score 18

前提・実現したいこと

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

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

[object HTMLInputElement]

エラーメッセージ
[object HTMLInputElement]
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>ソガリチョイス</title>
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
    <link rel="stylesheet" href="styles.css">
  </head>

  <body>
    <div class="container">
      <h1>ソガリチョイス!</h1>
      <img class="image131" src="image131-960x512.jpg" alt="">
    </div>

    <div class="main-top">
      <h2>やりたいことを入力すると</h2>
      <h3>ソガリがどちらを選ぶべきか選んでくれます!</h3>
    </div>

   ```  
<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>

ソースコード  
(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/ツールのバージョンなど)

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2019/01/02 17:56

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

    キャンセル

  • kei344

    2019/01/02 18:38

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

    キャンセル

  • gutimitsuguti

    2019/01/02 18:49

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

    キャンセル

  • kei344

    2019/01/02 18:50 編集

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

    キャンセル

回答 1

checkベストアンサー

0

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

// result.textContent = choise[n];
//                                ↓
   result.textContent = choise[n].value;

動くサンプル:https://jsfiddle.net/f214ypdu/


適切にインデントしたほうが問題を見つけやすいですよ。

【Online JavaScript beautifier】
https://beautifier.io/

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/01/02 22:53

    すみません、大変参考になりました。
    また、別サイトも貼っていただきありがとうございました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.06%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る