Цикл по массиву с помощью кнопки

0

Хорошо, по сути, я хочу создать короткую викторину, в которой есть следующая и предыдущая кнопка. Я хочу объединить два массива, вопросы и варианты, и в конце получится оценка. Я прочитал главы о DOM и Events, и он просто не щелкнет, по-видимому.

На самом деле мне нужно немного кода, который показывает конкретный пример того, как манипулировать DOM. До сих пор я имею в виду только массивы и функцию, объявляющую, что x фактически получает мой элемент по id. ха-ха.

Извините, у меня больше нет кода. Я попытался прикрепить id к абзацу, а затем получить его с помощью id и document.write массива, но это заменяет кнопку. Если вы запустите код ниже, вы увидите, что я говорю.

<!DOCTYPE html>
<html>
<head>
    <title>Bom</title>
</head>
<body>
    <input type="button" value="Iterate" id="myButton" onclick="iter_onclick()">
    <p id="qArray">Some Text</p>

    <script>
        var qArray = ["Who is my dog?", "who is the prez?", "Who is my girlfriend?", "Who am I?"];

        var cArray = [["Bill","Billy", "Arnold", "Tyler"],["Oz"," Buffon","Tupac","Amy"],["Tony Blair","Brack Osama","Barack Obama","Little Arlo"],["Emma Stone","Tony the Tiger","","The Smurf Girl"]];

        function iter_onclick () {
            var x = document.getElementById("qArray");
            document.write("Hello World");
        }        
     </script>
</body>
</html>'

Как я уже сказал, это моя первая попытка по-настоящему манипулировать DOM, и я знаю, что я хочу делать. Я просто не знаю, как это сделать. Я понимаю весь синтаксис, события и объекты и т.д. Но я не уверен, как его применять. Кроме того, нет JQuery. Я хочу знать, как создавать приложения с помощью Javascript, а затем работать в JQuery. Спасибо людям.

  • 0
    почему вы не используете JQuery?
  • 0
    Я имею в виду не то, что я не хочу изучать это, просто я хотел бы знать, как это сделать без. Итак, когда я изучаю Jquery, я понимаю это полностью.
Показать ещё 2 комментария
Теги:
events
dom-manipulation

2 ответа

1
Лучший ответ

Это будет охватывать ваши вопросы, надеюсь, что это поможет вам продолжить.

var qArray = ["Who is my dog?", 
       "who is the prez?", 
       "Who is my girlfriend?", 
       "Who am I?"];

var cArray = [
    ["Bill", "Billy", "Arnold", "Tyler"],
    ["Oz", " Buffon", "Tupac", "Amy"],
    ["Tony Blair", "Brack Osama", "Barack Obama", "Little Arlo"],
    ["Emma Stone", "Tony the Tiger", "Amy Dahlquist", "The Smurf Girl"]
];

var index = 0;

function iter_onclick() {
    //if this is the last question hide and displays quiz ends            
    if (index >= qArray.length) {
        document.getElementById('qArray').innerHTML = '<div>Quiz End, Thank you</div>'
        document.getElementById('myButton').style.visibility = 'hidden ';
        return false;
    }

    var html = ' <div> ' + qArray[index] + ' </div> <div>';
    for (var i = 0; i < cArray[index].length; i++) {
        html += '<label><input type="radio" name="ans" value="' 
             + cArray[index][i] + '"/ > ' + cArray[index][i] + ' </label>';
    }
    html += '</div > ';
    document.getElementById('qArray').innerHTML = html;

    index++;
}
Поделиться
  • 0
    Спасибо чувак. Это действительно то, что я искал. Я изучу это достаточно, пока не смогу вспомнить все тонкости. Написание html внутри идентификатора действительно то, что я хотел знать.
1

Здесь очень простой пример, из которого вы можете работать. Это изменяет существующие элементы DOM. Вы не можете использовать document.write() в документе, который уже загружен, или он очистит все, что у вас есть, и начнет работу, и это не самый эффективный способ поместить контент в DOM.

Этот пример имеет несколько полей на странице, он загружает вопрос, а затем проверяет ответ при нажатии следующей кнопки.

HTML:

<div id="question"></div>
<input id="answer" type="text"><br><br>
<button id="next">Next</button>  <br><br><br>
Number Correct So Far: <span id="numCorrect">0</span>

Javascript (в теге скрипта):

var qArray = ["Who is my dog?", "who is the prez?", "Who is my girlfriend?", "Who am I?"];

var cArray = [["Bill","Billy", "Arnold", "Tyler"],["Oz"," Buffon","Tupac","Amy"],["Tony Blair","Brack Osama","Barack Obama","Little Arlo"],["Emma Stone","Tony the Tiger","Amy Dahlquist","The Smurf Girl"]];

var questionNum = -1;
var numCorrect = 0;

function loadQuestion() {
    ++questionNum;
    if (questionNum >= qArray.length) {
        alert("all questions are done");
    } else {
        document.getElementById("question").innerHTML = qArray[questionNum];
        document.getElementById("answer").value = "";
    }
}

loadQuestion();

function checkAnswer() {
    var answer = document.getElementById("answer").value.toLowerCase();
    var allowedAnswers = cArray[questionNum];
    for (var i = 0; i < allowedAnswers.length; i++) {
        if (allowedAnswers[i].toLowerCase() == answer) {
            return true;
        }
    }
    return false;
}

document.getElementById("next").addEventListener("click", function(e) {
    if (checkAnswer()) {
        ++numCorrect;
        document.getElementById("numCorrect").innerHTML = numCorrect;
        loadQuestion();
    } else {
        alert("Answer is not correct");
    }
});

Рабочая демонстрация: http://jsfiddle.net/jfriend00/gX2Rm/

Поделиться
  • 0
    Эй, спасибо, единственная причина, по которой я не выбрал твой за лучший ответ, была потому, что я был немного нубом, код был немного более абстрактным. Кроме того, я искал выбор радиокнопок. Я не уточнил это, хотя извините. Спасибо, мужик, это тоже очень помогает. :)
  • 0
    @JerryWalker - надеюсь, вы сможете учиться у них обоих. Изучение чужого кода - отличный способ учиться.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню