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

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

ただいまの
回答率

88.37%

ワードプレスでJavaScriptがエラーになる

解決済

回答 1

投稿 編集

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

sanae0sanae

score 7

ワードプレスの投稿にて下記のJavascriptとHTMLのコードを入れたところ
Uncaught SyntaxError: Unexpected token '<'
と言ったエラーが出てきてしまいました。

状況としては ワードプレスの投稿に直接 
scriptタグを入れ書いています

調べてみると どこか書き間違いがあるとか
更新が出来ていないとか いろいろ出てきましたが
わからないため質問いたします

未熟なアホで申し訳ございませんが
ご教授お願いいたします。

ちなみに VSCodeでindex.HTMLだけで
同じように作ったものは普通に出来ていました。

プレビューのF12で見られる奴にはなぜか
入れてもいない <p>タグが出てきています…。
ーーーーーーーーーーーーーーーーー

const timeoutId = setTimeout(() =>{
        updateTimer();
      },10);
      if (timeLeft <0){
        isPlaying =false;
        clearTimeout(timeoutId);
        timerLabel.textContent = '0.00';
        setTimeout(() =>{
          showResult();
        }, 100);</p> 

↑の timeOutの部分でエラーが出ています。

下記が投稿に書いたコードです
ほぼ丸写しですがここから改造しようと思っていますが
エラーが出てしまいます…。
ーーーーーーーーーーーーーーーーーー

<div style="padding-top: 40px;
    font-family: 'courier New',monospace;
    text-align:center;">
      <p id="target" style="font-size: 48px;
      letter-spacing: 3px;">ここをクリックして初めてね!</p>
      <p class="info" style="color:#ccc;">
        成功した文字数:<span id="score">0</span>,
        失敗した文字数:<span id="miss">0</span>,
        残り時間:<span id="timer">0.00</span>,
      </p>
    </div>

   <script>
'use strict';
   {
    const words = [
     'lets',
    'honoka',
    'majimanji',
    'majimannjimarumajimannji'
    ];
    let word ;
     let loc ;
     let score ;
     let miss ;
     const timeLimit = 30 * 1000;
     let startTime;
     let isPlaying = false;
     const target =document.getElementById('target');
     const scoreLabel = document.getElementById('score');
     const missLabel = document.getElementById('miss');
     const timerLabel = document.getElementById('timer');
     function updateTarget(){
       let placeholder='';
       for(let i =0 ;i < loc; i++){
         placeholder += '_';
       }
       target.textContent =placeholder + word.substring(loc);
     }
     function updateTimer(){
       const timeLeft =startTime + timeLimit - Date.now();
       timerLabel.textContent  = (timeLeft/1000).toFixed(2);

      const timeoutId = setTimeout(() =>{
        updateTimer();
      },10);
      if (timeLeft <0){
        isPlaying =false;
        clearTimeout(timeoutId);
        timerLabel.textContent = '0.00';
        setTimeout(() =>{
          showResult();
        }, 100);

        target.textContent ='click to Replay';

      }
    }

    function showResult (){
      const accuracy = score + miss === 0 ? 0 : score / (score + miss)*100;
      alert(`${score} 個出来た!!, ${miss} 個ミスってる, ${accuracy.toFixed(2)}% 達成だこの野郎!`);
    }
     window.addEventListener('click', () => {
       if (isPlaying === true){
         return;
       }
       isPlaying =true;

       loc = 0;
       score = 0;
       miss = 0;
      scoreLabel.textContent =score;
      missLabel.textContent =miss;
      word = words[Math.floor(Math.random() * words.length)];

      target.textContent = word;
      startTime =Date.now();
      updateTimer();
    });

     window.addEventListener('keydown',(e)=>{
       if (isPlaying !== true){
         return;
       }
       console.log(e.key);
       if (e.key === word[loc]){
        console.log('score');
        loc++;
        if (loc === word.length){
          word = words[Math.floor(Math.random() * words.length)];
          loc =0;
        }
        updateTarget();
        score++;
        scoreLabel.textContent = score;
      }else{
        console.log('miss');
        miss++;
        missLabel.textContent = miss;
       }
     });
   }
   </script>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • kei344

    2020/06/14 21:27

    (質問文は編集できます)質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
    また、そのコードを挿入したのはどのような項目でしょうか。固定ページの本文エリアでしょうか、テンプレートの編集画面でしょうか。

    キャンセル

  • sanae0sanae

    2020/06/14 22:14

    変更しました!
    ワードプレスの投稿の本文です。

    直接 本文内部に<script>タグで書いてます。よろしくお願いします。

    キャンセル

回答 1

checkベストアンサー

+2

適当に調べると改行を全部外せばいいみたいなこと書いてありますよ。
自動改行挿入機能によりpタグが現れるとも。

「ワードプレス 投稿 scriptタグ」でgoogle先生1件目

https://wp-doctor.jp/blog/2017/09/06/wordpress%E3%80%80%E3%83%AF%E3%83%BC%E3%83%89%E3%83%97%E3%83%AC%E3%82%B9%E3%81%AE%E6%8A%95%E7%A8%BF%E3%81%ABjavascript-js%E3%82%92%E6%9B%B8%E3%81%8D%E8%BE%BC%E3%82%80%E6%96%B9%E6%B3%95/

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2020/06/14 22:16

    ありがとうございます!助かりました!出来ました!!

    キャンセル

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

  • ただいまの回答率 88.37%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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