\r\n\r\n\r\n

ボタンクリックにより背景色と文字色を変化

\r\n \r\n \r\n\r\n\r\nコード\r\n```\r\n\r\n下に実行したいイメージを添付いたします。\r\n![イメージ説明](cdf9536d5a09acda4bba6372e44a9ce9.png)\r\n\r\n※JavaScriptを練習するために、MDNのDOMチュートリアルなどにトライしてみましたが、理解が追いつかない状況です。(「ドットインストール」さん、「Progate」さんなどで一通り学習したのですが.....)\r\n\r\nある程度の時間は割いてもいいので、JavaScriptを深く学びたいと考えています。\r\n\r\nどうぞ、御教授のほどお願いいたします。","answerCount":2,"upvoteCount":0,"datePublished":"2020-07-07T04:13:49.236Z","dateModified":"2020-07-07T04:13:49.236Z","acceptedAnswer":{"@type":"Answer","text":"`document`オブジェクトに`style`プロパティは存在しません。\r\n`document.body.style`ならありますので、\r\nそれを前提に自身のコードを直してみてください。","dateModified":"2020-07-07T04:24:25.963Z","datePublished":"2020-07-07T04:24:25.963Z","upvoteCount":2,"url":"https://teratail.com/questions/275706#reply-393026"},"suggestedAnswer":[{"@type":"Answer","text":"> 検証ツールのconsoleで見た所503エラーが出ます\r\n\r\n503エラーが出るのは**サーバサイド**の問題です。JavaScriptとは別件です。","dateModified":"2020-07-07T04:17:30.989Z","datePublished":"2020-07-07T04:17:30.989Z","upvoteCount":4,"url":"https://teratail.com/questions/275706#reply-393025","comment":[{"@type":"Comment","text":"ご回答ありがとうございます。\r\n解決できそうです。\r\n\r\n知識不足だったので、勉強に励みたいと思います。","datePublished":"2020-07-07T04:37:37.172Z","dateModified":"2020-07-07T04:37:37.172Z"}]}],"breadcrumb":{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"トップ","url":"https://teratail.com"},{"@type":"ListItem","position":2,"name":"DOMに関する質問","url":"https://teratail.com/tags/DOM"},{"@type":"ListItem","position":3,"name":"DOM","url":"https://teratail.com/tags/DOM"}]}}}

回答率: 85.29%

質問するログイン新規登録

トップ DOMに関する質問

Q&A

解決済

2回答

474閲覧

JavaScriptにおけるDOM操作に関して

総合スコア10

0グッド

0クリップ

投稿2020/07/07 04:13

0

0

下記に記述したコードが実行されません。

JavaScript初心者です。
clickイベントにより、色の変化を付けたい作成しようと思い、以下のコードを記述してみたところ、想定通りに実行されませんでした。
検証ツールのconsoleで見た所503エラーが出ます(コードの書き方自体に問題がある気がするので、どの部分が原因なのか理解できていません)。

<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>テスト</title>
    <script>
        
        function background_black() {
            document.style.color = '#000000';
            document.style.body.backgroundColor = '#FFFFFF';
        }
        function background_white() {
            document.style.color = '#FFFFFF';
            document.style.body.backgroundColor ='#000000';
        }
        window.onload = function() {
            var bgBlack = document.getElementById('black');
            var bgWhite = document.getElementById('white');
            bgBlack.addEventListener('click', background_black, false);
            bgWhite.addEventListener('click', background_white, false);
        }
        
    </script>
</head>
<body>
    <p>ボタンクリックにより背景色と文字色を変化</p>
    <button id="black">背景黒</button>
    <button id="white">背景白</button>
</body>
</html>
コード

下に実行したいイメージを添付いたします。

※JavaScriptを練習するために、MDNのDOMチュートリアルなどにトライしてみましたが、理解が追いつかない状況です。(「ドットインストール」さん、「Progate」さんなどで一通り学習したのですが.....)

ある程度の時間は割いてもいいので、JavaScriptを深く学びたいと考えています。

どうぞ、御教授のほどお願いいたします。

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

回答2件

0

検証ツールのconsoleで見た所503エラーが出ます

503エラーが出るのはサーバサイドの問題です。JavaScriptとは別件です。

投稿2020/07/07 04:17

総合スコア146851

2020/07/07 04:37

ご回答ありがとうございます。解決できそうです。知識不足だったので、勉強に励みたいと思います。

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

0

ベストアンサー

documentオブジェクトにstyleプロパティは存在しません。
document.body.styleならありますので、
それを前提に自身のコードを直してみてください。

投稿2020/07/07 04:24

総合スコア9572

2020/07/07 04:35

ご回答誠にありがとうございます。解決いたしました。精進します。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.29%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

関連した質問

トップ DOMに関する質問

JavaScriptにおけるDOM操作に関して

関連した質問

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