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

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

背景色は必要性からMaterial Design Liteを用いております。
そのため、ＣＳＳではなく、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

HTML
1<script type="text/javascript">
2var myfunc = function(){
3var myp = document.getElementById("myid");
4myp.innerHTML = "'+ cookies '";
5}
6function onload() {
7var cookies = document.cookie;
8document.getElementById("msg").innerHTML = "　" + cookies;
9}
10function changeBackColor(){
11var elements = document.getElementsByClassName('c');
12if((myp = 'red')) {
13for(i=0;i<elements.length;i++){
14elements[i].classList.add('mdl-color--red-200');
15}}
16if((myp = 'blue')) {
17for(i=0;i<elements.length;i++){
18elements[i].classList.add('mdl-color--blue-200');
19}}
20else {}
21}
22</script>
23
24<body onload="onload(); changeBackColor();" class="c" >
25        <span class="sub-title-font" id="msg"></span>
26</body>
27
28<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
29<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
30<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>

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

m.ts10806

2018/06/05 08:13

ひとまず、フレームワークjsの読み込み記述のあとに自身のscriptを書かれては？CSSはできるだけ<head></head>内の方が良いです。　前者についてはフレームワークの諸々が読み込まれる前に実行されるため、対象のメソッドやCSSクラスがない場合には効果を発揮しません。

KSK8000

2018/06/05 08:21

＞mts10806様　早速ありがとうございます。scriptを後に回してみましたが、効果はありませんでした。

shu

2018/06/05 08:30

if文の比較演算子は[=]ではなく[==]若しくは[===]ではないでしょうか？

KSK8000

2018/06/05 08:34

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

x_x

2018/06/05 08:36

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

KSK8000

2018/06/05 08:39

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

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

回答1件

ベストアンサー

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

Javascript
1var myfunc = function(){
2  var myp = document.getElementById("myid");
3  myp.innerHTML = "'+ cookies '";
4}
5function onload() {
6  var cookies = document.cookie;
7  document.getElementById("msg").innerHTML = "　" + cookies;
8}
9function changeBackColor(){
10  var myp = document.cookie; // mypにクッキーの内容を代入
11  var elements = document.getElementsByClassName('c');
12  if(myp == 'red') { // =は代入。等価演算子は==
13    for(i=0;i<elements.length;i++){
14      elements[i].classList.add('mdl-color--red-200');
15    }
16  } else if(myp == 'blue') { // =は代入。等価演算子は==
17    for(i=0;i<elements.length;i++){
18      elements[i].classList.add('mdl-color--blue-200');
19    }
20  }
21}