JavascriptでDOMの動作が上手くいきません

お世話になります。
現在こちらのFizzBuzz問題に取り組んでおります。
https://gyazo.com/fc7c63a7609d190cbec34b0dabcc1660

現在以下のコードのような状態なのですが、入力した値に対してJSの6行目〜15行目をHTMLに出力したいのですが上手く反映されずでして。


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel ="stylesheet" href="css/style.css">
  <title>課題2</title>
  </head>
     <body>
        <h1>FizzBuzz問題</h1>

        <div class ="quest1">
        <p>FizzNum:</p>
        <input type="text" name="number" class ="input1"></p>
        </div>
        <div class ="quest2">
        <p>BuzzNum:</p>
        <input type="text" name="number" class ="input2"></p>
        </div>
        <button>Add</button>
        <p>【出力】</p>

        <ul>
        <li id="target"></li>

        </ul>
  </div>
</div>


  <script src ="js/main.js"></script>
</body>
</html>

[javascript}

'use strict'

        const FizzNum = parseInt(prompt("FuzzNum"));
        const BuzzNum = parseInt(prompt("BuzzNum"));

        if (isNaN(FizzNum) ||isNaN(FizzNum)){
            console.log("整数値を入れてください")
            }else{
            for (let index = 1; index <= 99; index++) {
            if(index % FizzNum === 0 && index % BuzzNum === 0) {
            console.log(`FizzBuzz ${index}`);
            }else if(index % FizzNum === 0) {
            console.log(`Fizz ${index}`);
            }else if(index % BuzzNum === 0){
            console.log(`Buzz ${index}`);
            }

          }

          document.getElementById('#target').addEventListener('click',() => {
          const li= document.createElement('li');
          const text =document.querySelector('input');
          li.textContent =text.value;
          document.querySelector('ul').appendChild(FizzNum);

        });
            
      }

どのように書けばよいか御指南頂けますと幸いです。

宜しくお願い致します。

maisumakun

2020/06/04 02:59

コードは画像ではなく文字として貼り付けてください。

new1ro

2020/06/04 03:03 編集

HTMLのキャプチャ画像が2枚貼り付けられており、「JSの6行目〜15行目」が確認できません。またキャプチャ画像とは別に、ソースコード (HTML / JavaScript) をテキストとして、以下のような形で質問に貼り付けてください。 ``` ソースコード ``` テキストの方が、コピーして手元で試したりできるため問題を発見しやすく、回答しやすいため解決に近づくと思います。

mikeikeikename

2020/06/04 03:08

失礼しました、コードに変更いたしました。

Lhankor_Mhy

2020/06/04 03:22

期待した処理結果を書きましょう https://teratail.com/help/question-tips#questionTips3-4-3

mikeikeikename

2020/06/04 03:25 編集

失礼しました、こちらの画像のような形です。 https://gyazo.com/fc7c63a7609d190cbec34b0dabcc1660 - 入力された整数値でFizzBuzz問題を実行できる - fizzNumに入力された値の倍数とbuzzNumに入力された値の倍数を小さい順に表示する - 各々倍数と一緒にfizz、buzzと表示させる - 両方の倍数である時にはfizzBuzzと表示させる - 表示させるのは二桁の値まで - 整数値が入力されずに実行ボタン押下された際にはエラーを表示させる - 文字列が入力された時 - 少数が入力された時 - 空欄だった時

Lhankor_Mhy

2020/06/04 03:29

「現在画像(HTML、 JS)のような状態」とのことですが、これは「画像のようにしたい」という意味だということですか？

Lhankor_Mhy

2020/06/04 03:31

ああ、編集前には「現在画像」があったのですね……

mikeikeikename

2020/06/04 03:32

紛らわしくて申し訳ありません。最初、現在のコードの画像を載せていたのですが、コメントにて「画像よりコードを載せましょう」というご指摘をいただき、画像を消してコードを記載しました。本文も訂正いたしました。