Javascript在桌面上工作，但在移动设备上只能部分工作

下面是测试的完整JavaScript代码。它可以在桌面浏览器上完美工作。然而，当我在手机上测试它时，它不起作用

Mobile加载JSON测验，但在选择所有答案后，它不会冻结所有选择的答案并显示结果。相反，不会发生任何情况，不会显示/计算结果，用户可以继续选择答案

我没有在手机上使用JavaScript的经验，也不知道是什么导致了这个问题

我已经删除了一些代码部分，这些代码只是附加了html，以减少大小

您可以在这里查看：plnkr.co/edit/tkCQVxoIq9oOiApeUY66？p=preview

// Adds the functionality to check if an element has a class
HTMLElement.prototype.hasClass = function (className) {
    "use strict";
    if (this.classList) {
        return this.classList.contains(className);
    }
    return (-1 < this.className.indexOf(className));
};

// Adds the ability to remove classes from elements
HTMLElement.prototype.removeClass = function (className) {
    "use strict";
    if (this.classList) {
        this.classList.remove(className);
    }
    return this;
};

var BF_QUIZ = {};

BF_QUIZ.quiz = function () {
    "use strict";

    // Sets variables
    var highest_score, quiz_div, quiz_title, quiz_image, questions = [],
        results = [], inputs = [], answers = [], userAnswers = [],

    // Gets the Quiz "canvas"
    getQuizCanvas = function getQuizCanvas() {
        quiz_div = document.getElementById("bf-quiz");
    },

    // Parses the JSON data passed from the Loader
    getJSONData = function getJSONData(json_data) {
        //Main Quiz Title
        quiz_title = json_data[0].quiz_title;
        //Main Quiz Image
        quiz_image = json_data[0].quiz_image;
        //Populates questions arrary with questions from JSON file
        for (var i = 0; i < json_data[0].quiz_questions.length; i++) {
            questions.push(json_data[0].quiz_questions[i]);
        }
        //Populates results array with results from JSON file
        for (var j = 0; j < json_data[0].quiz_results.length; j++) {
            results.push(json_data[0].quiz_results[j]);
        }
    },

    // Writes the Quiz into the document
    writeQuiz = function writeQuiz() {
        var newQuizWrapper, newTitle, newQuestionTextWrapper, newQuestionText,
            newAnswerForm, newAnswer, newAnswerImage, newAnswerTextWrapper, newAnswerInput,
            newAnswerText, newQuestion;
        newQuizWrapper = document.createElement("div");
        newQuizWrapper.className = "quiz-wrapper";
        newTitle = document.createElement("h1");
        newTitle.innerHTML = quiz_title;
        newQuizWrapper.appendChild(newTitle);
        for (var i = 0; i < questions.length; i++) {
            newQuestionTextWrapper = document.createElement("div");
            newQuestionTextWrapper.className = "quiz-question-text-wrapper";
            newQuestionText = document.createElement("h2");
            newQuestionText.innerHTML = questions[i].question.text;
            newQuestionTextWrapper.appendChild(newQuestionText);
            newAnswerForm = document.createElement("form");
            for (var j = 0; j < questions[i].question.question_answers.length; j++) {
                newAnswer = document.createElement("div");
                newAnswer.className = "quiz-answer";
                newAnswer.setAttribute("data-quizValue", 
                    questions[i].question.question_answers[j].answer.value);
                if (questions[i].question.question_answers[j].answer.image) {
                    newAnswerImage = document.createElement("img");
                    newAnswerImage.src = questions[i].question.question_answers[j].answer.image;
                    newAnswer.appendChild(newAnswerImage);
                }
                else{
                    //no image  
                }
                newAnswerTextWrapper = document.createElement("div");
                newAnswerTextWrapper.className = "quiz-answer-text-wrapper";
                newAnswerTextWrapper.id = "quiz-answer-text-wrapper";
                newAnswerInput = document.createElement("input");
                newAnswerInput.type = "radio";
                newAnswerInput.name = "answer";
                inputs.push(newAnswerInput);
                newAnswerText = document.createElement("label");
                newAnswerText.htmlFor = "quizzer";
                newAnswerText.innerHTML = questions[i].question.question_answers[j].answer.text;
                newAnswerTextWrapper.appendChild(newAnswerInput);
                newAnswerTextWrapper.appendChild(newAnswerText);
                newAnswer.appendChild(newAnswerTextWrapper);
                answers.push(newAnswer);
                newAnswerForm.appendChild(newAnswer);
            }
            newQuestion = document.createElement("div");
            newQuestion.className = "quiz-question";
            newQuestion.appendChild(newQuestionTextWrapper);
            newQuestion.appendChild(newAnswerForm);
            newQuizWrapper.appendChild(newQuestion);
        }
        quiz_div.appendChild(newQuizWrapper);
    },

    //Checks all of the inputs to see if the
    checkInputs = function checkInputs() {
        var c = 0;
        for (var i = 0; i < inputs.length; i++) {
            if (inputs[i].checked) {
                userAnswers.push(inputs[i].parentNode.parentNode.dataset.quizvalue);
                c++;
            }
        }
        if (c==questions.length) {
                calcResult();
        }
    },

    calcResult = function calcResult() {
        var highest = 0;
        for (var i = 0; i < results.length; i++) {
            results[i].countof = 0;
            for (var j = 0; j < userAnswers.length; j++) {
                if (userAnswers[j] == results[i].result.id) {
                    results[i].countof++;
                }
            }
            if (results[i].countof > highest) {
                highest = results[i].countof;
                highest_score = results[i];
            }
        }
        //disable the inputs after the quiz is finished
        writeResult();
        disableAnswers();
    },

    writeResult = function writeResult() {
        newResult = document.createElement("div");
        //append html to render (quiz result)
        ...;
        quiz_div.appendChild(newResult);
    },

    updateSelectedAnswer = function updateSelectedAnswer(element) {
        element.children.namedItem("quiz-answer-text-wrapper").firstChild.checked = true;
        for (var i = 0; i < element.parentNode.children.length; i++) {
            if (element.parentNode.children.item(i).hasClass("selected")) {
                element.parentNode.children.item(i).removeClass("selected");
            }
        }
        element.className = element.className + " selected";
    },

    addClickEvents = function addClickEvents() {
        var onAnswerClick = function onAnswerClick() {
                if (!this.hasAttribute("disabled")) {
                    updateSelectedAnswer(this);
                    checkInputs();
            }
        };
        for (var i = 0; i < answers.length; i++) {
            answers[i].addEventListener("click", onAnswerClick);
        }
    },

    disableAnswers = function disableAnswers() {
        for (var q = 0; q < answers.length; q++) {
            answers[q].disabled = true;
            answers[q].setAttribute("disabled", true);
            answers[q].className = answers[q].className + " disabled";
        }
    };

    return {
        init: function (json_data) {
            getQuizCanvas();
            getJSONData(json_data);
            writeQuiz();
            addClickEvents();
        }
    };
}();

BF_QUIZ.quizLoader = function () {
    "use strict";

    var json_data, request,

    loadQuizJSON = function loadQuizJSON(json_url) {
        request = new XMLHttpRequest();
        request.open("GET", json_url, false);
        request.onload = function() {
            if (request.status >= 200 && request.status < 400) {
                // Success!
                json_data = JSON.parse(request.responseText);
            } else {
                // We reached our target server, but it returned an error
            }
        };
        request.onerror = function() {
            // There was a connection error of some sort
        };
        request.send();
    };

    return {
        init: function(json_url) {
            loadQuizJSON(json_url);
            BF_QUIZ.quiz.init(json_data);
        }
    };
}();

---

如果您尝试在移动设备上查看控制台日志，您可能会注意到有一个JavaScript错误，因为iOS Safari比您使用的任何桌面浏览器都更不宽容。特别是，在严格模式下将HtmleElement的样式属性设置为字符串是非法的。您可能会看到一些将其正确设置为的示例，若您解决了这个问题，代码似乎也适用于Mobile Safari

---

请注意，您的问题中缺少有问题的代码，仅在plunker上的writeResult完整代码中可见。这就是为什么从您的plunker提供

非常重要的原因，如果您在newresultitle.style=color:rgba238,62,52,99；的第152行更新代码；；到newresultitle.style.color=rgba238,62,52,99；这将使它在移动浏览器上工作

HtmleElement.style重新运行只读属性，桌面浏览器在尝试为其赋值时忽略该属性，移动浏览器抛出错误

---

正在工作的plunker

为什么不将代码缩小到不工作的部分，然后记录到页面上的一个div以查看发生了什么？这可能是手机浏览器中不支持的功能。还有一个。。。；在writeResult中，将引发异常，应该存在什么？您是否可以与json共享一个工作的plunker？通过测试问题来回答问题会更容易。共享一个工作页面link@azs06这是一个链接，它在桌面上工作，但不是mobile@SagarV这里是一个链接-当你点击跑步视图时，它在桌面上工作，但不是mobile，要在mobil中看到它需要打开为刚刚跑步。pln。。。