JavaScriptで要素の値を取得するには

Question

###前提・実現したいこと
要素の値を取得して値によって条件分岐を行いたい。

###発生している問題
var hoge = document.getElementById('hoge');
で要素を取得すると

<p id="hoge">値</p> の形でタグを含めた全てが取得されてしまう。 '値'だけを取得したい。

###該当のソースコード

// html
<div id="btn">
    <p id="result">?</p>
</div>

// JavaScript
// ボタンを押下した時、ボタンの表示を変更する
btn.addEventListener('click', function() {
  var results = ['大吉', '中吉', '5000兆円'];

  var omikuji_num = Math.floor(Math.random() * results.length);
  result.innerHTML = results[omikuji_num];
});

var result = document.getElementById('result')
// 値が5000兆円だった場合、クラスを設定する。
if (result === <p id="result">5000兆円</p>) {
        result.className = 'trillion';
    }

###試したこと
var hoge = document.getElementById('hoge').value;
とするとエラーになります。

var result = $("#result").children('p');
とするとjqを読み込んでいないのでエラー？
main.js:6 Uncaught ReferenceError: $ is not defined

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

Answer 1

textContent ですかね
https://developer.mozilla.org/ja/docs/Web/API/Node/textContent

Comments

[m.ts10806]

あ、こっちの方が純粋に値だけとれるのでこっちの方がいいですね。

[suezu1022]

解決する事ができました！
ありがとうございます。textContentは要素を追加する為のものだと思っていました。

Answer 2

var hoge = document.getElementById('hoge').value;
とするとエラーになります。

指定した要素にはvalue値（要はinputコントロールの値）がありません。
指定要素内の値を取得したいときはinnerHTMLを指定します。
※この場合、指定要素内にHTMLタグがあった場合はそれも取得します。

<p id="result">hoge</p>
<script>
alert(document.getElementById("result").innerHTML);
//hoge
</script>

とするとjqを読み込んでいないのでエラー？

その通りです。
jQuery利用する場合は.html()または.text()ですね。
この2つは用途が違うので注意です。

Comments

[suezu1022]

ありがとうございます！
jqの部分にもご回答いただいてありがとうございます。
innerHTMLは要素を変更する為のものだと思っていました。取得もできるんですね。勉強になりました！

[m.ts10806]

変更というか代入ですね。
値を代入すればその値になるし、参照として利用すれば現在の値が取得できます。HTMLオブジェクトで利用できる機能はI/Oがセットのものが多いです。