javaにおいてのinnerHTMLを使用した文字のフォント変更、色変更

前提・実現したいこと

javascriptを使用して、ボタンをクリックするとp要素の文字色とフォントが変わるようにしたいのです。
具体的には、ボタンをクリックするたびに文字色が赤、黒、赤、、と変化し、フォントが1pxずつ大きくなるようにしたいのですが、自分の力では解決できなかったため質問させてください。

自分の知識で途中まではあっているかは定かではありませんでしたが書いてみました。
???のところが自分で考えてもうまく思いつかなかった部分です。

該当のソースコード

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>sample</title>
  </head>
  <body>
    <p id='a'>フォントと色が変わるよ。</p>
    <input type="button" value="change" onclick='change();'>

    <script>
    let size = 1;
    
    let color = 'red';

    function change(){???
      if(color = 'red'){???
        
      }else{ ???
       
      }

      document.getElementById('a').style.color = color;

      document.getElementById('a').style.fontSize = size + 'px';

      size = size + 1;

    }
    </script>
  </body>
</html>

maisumakun

2021/10/10 09:13

（JavaScriptでない）Javaはどのように関係してきますか？

Lhankor_Mhy

2021/10/12 06:51

Javaは関係なさそうなので、質問タグから外すことをおすすめします。なぜならば、[HTML][CSS]という質問タグならば「答えられそうだから見てみよう」と思う回答者が、[HTML][CSS][Java]という質問タグだったために「Javaはわからないから見なくていいや」となってしまい、結果として回答が得られない可能性が増えるからです。

Lhankor_Mhy

2021/10/12 06:52

ちなみに、私もJavaわかんないです。

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

回答1件

javascript初心者ですが勉強がてら書いてみました！
最初の文字サイズを元にして１づつ増やす方法がわかりませんでした、ごめんなさい。
id='a'はなんか気持ち悪かったのでtargetに変更しました。

html
1<input type="button" value="change" onclick='change();'>
2<p id='target'>フォントと色が変わるよ。</p>

javascript
1const target = document.getElementById('target');
2const color_ar = ['red', 'black'];
3let size = 1;
4target.style.fontSize = size + 'px';
5
6function change() {
7  size++;
8  target.style.fontSize = size + 'px';
9  target.style.color = color_ar[size % 2];
10}
11