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

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

ただいまの
回答率

90.48%

  • JavaScript

    16982questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    9271questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • HTML5

    4167questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

classの変更を用いることで、どのリンクを踏んで来たかによって、表示される背景色が変わる画面を作りたい

解決済

回答 1

投稿

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

KSK8000

score 11

現在、HTMLとjavascriptを組み合わせて
「同じ画面上だがどのリンクを踏んで来たかによって、表示される背景色が変わる」という仕様を作ろうとしております。
ですが、色が片方に固定されてしまい、予定の挙動となりません。
どのようにすれば、そうした挙動が得られるでしょうか?

背景色は必要性からMaterial Design Liteを用いております。
そのため、CSSではなく、classを変更する形で対応しております。

in.htmlにあるredかblueのボタンでリンクへ移動すると
out.htmlの背景色が変わる形にしようとしています。

in.html

<script type="text/javascript">
    function red() { 
        document.cookie = "red";
    }
    function blue() { 
        document.cookie = "blue";
    }
</script>

<body>
        <a  onclick="red(); return true; " href="out.html">
            red
        </a>
<br>
        <a onclick="blue(); return true; " href="out.html">
            blue
        </a>
</body>


out.html

<script type="text/javascript">
var myfunc = function(){
var myp = document.getElementById("myid");
myp.innerHTML = "'+ cookies '";
}
function onload() {
var cookies = document.cookie;
document.getElementById("msg").innerHTML = " " + cookies;
}
function changeBackColor(){
var elements = document.getElementsByClassName('c');
if((myp = 'red')) {
for(i=0;i<elements.length;i++){
elements[i].classList.add('mdl-color--red-200');
}}
if((myp = 'blue')) {
for(i=0;i<elements.length;i++){
elements[i].classList.add('mdl-color--blue-200');
}}
else {}
}
</script>

<body onload="onload(); changeBackColor();" class="c" >
        <span class="sub-title-font" id="msg"></span>
</body>

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>

自分の技術ではソースコードに問題があるのか、方法自体に問題があるのか判別がつきません。
classの変更について良い手法をご存知の方がいれば、ご教授願えないでしょうか。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • KSK8000

    2018/06/05 17:34

    >-shu-様 ありがとうございます。演算子を[==]及び[===]に変更したところ、背景色の変更自体が起きなくなりました。自分の条件の記述自体に問題があったのかもしれません

    キャンセル

  • x_x

    2018/06/05 17:36

    out.htmlにおいてmsg内に想定通りの値が表示されているでしょうか?

    キャンセル

  • KSK8000

    2018/06/05 17:39

    >x_x様 想定通りではあったのですが、自分の想定自体に問題があるのかもしれません

    キャンセル

回答 1

checkベストアンサー

+1

こういうことですかね?
myfuncが何をする関数なのかはちょっとわからなかったです。

var myfunc = function(){
  var myp = document.getElementById("myid");
  myp.innerHTML = "'+ cookies '";
}
function onload() {
  var cookies = document.cookie;
  document.getElementById("msg").innerHTML = " " + cookies;
}
function changeBackColor(){
  var myp = document.cookie; // mypにクッキーの内容を代入
  var elements = document.getElementsByClassName('c');
  if(myp == 'red') { // =は代入。等価演算子は==
    for(i=0;i<elements.length;i++){
      elements[i].classList.add('mdl-color--red-200');
    }
  } else if(myp == 'blue') { // =は代入。等価演算子は==
    for(i=0;i<elements.length;i++){
      elements[i].classList.add('mdl-color--blue-200');
    }
  }
}

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

関連した質問

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

  • JavaScript

    16982questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    9271questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • HTML5

    4167questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • トップ
  • JavaScriptに関する質問
  • classの変更を用いることで、どのリンクを踏んで来たかによって、表示される背景色が変わる画面を作りたい