JavaScript未在WordPress上使用

Question

此代碼不能以JsFiddle的方式運行。它幾乎沒有顯示在WordPress上實施時的一半應用程序。

見琴：https://jsfiddle.net/od6g095L/

如何它應該顯示：

這是怎麼顯示WordPress的：

這正是我有我的wordpress頁面：

<div id="container"> 
     <div id="content"> 
    <strong>What Type of Person Are You?</strong> 
     <strong><h3 id="question"></h3></strong> 
     <div id="choices"></div> 
     <p id="score"></p> 
     </div> 
<script type="text/javascript"> 
var quiz = [{ 
      "question": "What is the full form of IP?", 
      "choices": ["Internet Provider", "Internet Port", "Internet Protocol" , "Other"], 
      "correct": "Other" 
     }, { 
      "question": "Who is the founder of Microsoft?", 
      "choices": ["Bill Gates", "Steve Jobs", "Steve Wozniak" , "Martin Shaba"], 
      "correct": "Bill Gates" 
     }, { 
      "question": "What was your first dream?", 
      "choices": ["8 bits", "64 bits", "1024 bits"], 
      "correct": "8 bits" 
     }, { 
      "question": "The C programming language was developed by?", 
      "choices": ["Brendan Eich", "Dennis Ritchie", "Guido van Rossum"], 
      "correct": "Dennis Ritchie" 
     }, { 
      "question": "What does CC mean in emails?", 
      "choices": ["Carbon Copy", "Creative Commons", "other"], 
      "correct": "Carbon Copy" 
     }]; 


// define elements 
var content = $("content"), 
questionContainer = $("question"), 
choicesContainer = $("choices"), 
scoreContainer = $("score"), 
submitBtn = $("submit"); 

// init vars 
var currentQuestion = 0, 
score = 0, 
askingQuestion = true; 

function $(id) { // shortcut for document.getElementById 
    return document.getElementById(id); 
} 

function askQuestion() { 
    var choices = quiz[currentQuestion].choices, 
    choicesHtml = ""; 

    // loop through choices, and create radio buttons 
    for (var i = 0; i < choices.length; i++) { 
    choicesHtml += "<input type='radio' name='quiz" + currentQuestion + 
    "' id='choice" + (i + 1) + 
    "' value='" + choices[i] + "'>" + 
    " <label for='choice" + (i + 1) + "'>" + choices[i] + "</label><br>"; 
    } 

    // load the question 
    questionContainer.textContent = quiz[currentQuestion].question; 

    // load the choices 
    choicesContainer.innerHTML = choicesHtml; 

    // setup for the first time 
    if (currentQuestion === 0) { 
    scoreContainer.textContent = "0 correct out of " + 
    quiz.length + ""; 
    // submitBtn.textContent = "Submit Answer"; 
    } 

    var radios = document.querySelectorAll('input[type=radio]'); 
    [].forEach.call(radios, function(radio) { 
    radio.onchange = function() { 
     checkAnswer(); 
    } 
    }) 
} 

function checkAnswer() { 
    // are we asking a question, or proceeding to next question? 
    if (askingQuestion) { 
    // submitBtn.textContent = "Next Question"; 
    askingQuestion = false; 

    // determine which radio button they clicked 
    var userpick, 
    correctIndex, 
    radios = document.getElementsByName("quiz" + currentQuestion); 
    for (var i = 0; i < radios.length; i++) { 
     if (radios[i].checked) { // if this radio button is checked 
     userpick = radios[i].value; 
     } 

     // get index of correct answer 
     if (radios[i].value == quiz[currentQuestion].correct) { 
     correctIndex = i; 
     } 
    } 

    // setup if they got it right, or wrong 

    if (userpick == quiz[currentQuestion].correct) { 
     score++; 
    } else { 
    } 

    scoreContainer.textContent = "" + score + " correct out of " + 
    quiz.length + ""; 


    askingQuestion = true; 
    // change button text back to "Submit Answer" 
    //submitBtn.textContent = "Submit Answer"; 
    // if we're not on last question, increase question number 
    if (currentQuestion < quiz.length - 1) { 
     currentQuestion++; 
     askQuestion(); 
    } else { 
     showFinalResults(); 
    } 
    } else { 
    } 
} 

function showFinalResults() { 
    content.innerHTML = "<h1>You did amazing!</h1>" + 
    "<h5>Below are your results</h5>" + 
    "<h2>" + score + " out of " + quiz.length + " questions, " + 
    Math.round(score/quiz.length * 100) + "%<h2>"; 
} 

window.addEventListener("load", askQuestion, false); 
submitBtn.addEventListener("click", checkAnswer, false); 
</script> 

<style> 
#container { 
    max-width:600px; 
    height: auto; 
    background: #59C1DA; 
    border: 10px solid #333; 
    border-radius: 5px; 
    margin: auto; 
    text-align: center; 
} 

#content { 
    border: 10px solid #fff; 
    padding: 15px; 
    color: #fff; 

} 
#question { 
    font-weight: bold; 
} 
#score { 
    margin-top: 20px; 
    font-weight: bold; 
} 
</style> 

Answer 1

在jsfiddle上，您將腳本分開。在你的WordPress頁面上，這些內容全部以inline <script>標籤顯示。這意味着window.load事件的執行時間爲*已經發生。您需要直接調用askQuestion()函數，或者（更好，更好）將腳本放在單獨的.js文件中，並將其包含在wp_enqueue_script()中。

Answer 2

我通過安裝名爲「Scripts n Styles」的WordPress插件解決了該問題，該插件允許您分別在每個帖子中實現Javascript代碼和CSS，而不會損壞！該html將留在WordPress的HTML文章。

它爲我工作！我很高興我解決了它！