Изменение html-текста с помощью JavaScript

-1

Я пытаюсь изменить значение элемента таблицы id = "questionLoc" на вопрос, который я разместил в массиве. HTML ниже ...Изменение html-текста с помощью JavaScript

<link rel="stylesheet" type="text/css" href="stylesheet.css"> 
<script type="text/javascript" src="main.js"></script> 
<script type="text/javascript" src="javascript/jquery-1.3.2.min.js"></script> 
<title>Game of Thrones Trivia Quiz</title> 
</head> 
<body> 
<header> 
    <h1>Game of Thrones Trivia Quiz</h1> 
</header> 
<form action="" name="mainForm"> 
    <p>Please choose the correct answer for the question given. Do so promptly - winter is coming.</p> 
    <table> 
     <tr> 
      <td id="questionLoc"> 
      Question Location 
      </td> 
     </tr>

Javascipt документ ...

alert("hi"); 

var allQuestions = []; 

function question(question, choices, answer) { 
       this.question = question; 
       this.choices = choices; 
       this.answer = answer; 
} 

var question1 = new question("Who is Sansa\'s mother?", ["Cercei", "Marjorie", "Catelin", "Lysa"], 2); 
var question2 = new question("Who is Geoffrey\'s mother?", ["Cercei", "Marjorie", "Catelin", "Lysa"], 0); 
var question3 = new question("Who is Robert\'s mother?", ["Cercei", "Marjorie", "Catelin", "Lysa"], 3); 

allQuestions.push(question1, question2, question3); 

$(document).ready(function() { 
    $('#button').click(function { 
     $('R1').html("Response 1") 
    }); 

}); 

var qLoc = document.getElementById("questionLoc").innerHTML; 
qLoc = allQuestions[0].question;

Предупреждение ("привет") является тестом, и появляется только когда я закомментируйте мой JQuery. Текст «questionLoc» не изменяется, несмотря на строку «getDocumentByID». Любые мысли о том, почему код не выполняется, будут оценены! Спасибо.

источник

2017-02-08 Alex

Предоставить jsfiddle. –

В дополнение к другим потенциальным проблемам $ ('R1') вряд ли будет действительным селектором. Отсутствует точка или хэш. –

Вы должны проверить консоль при разработке JavaScript. Если вы посмотрите на него, вы увидите, есть синтаксическая ошибка в этой строке:

$('#button').click(function {

Есть недостающие скобки после ключевого слова function. Вот почему alert не работает - ваш скрипт не анализируется из-за этой ошибки.

Чтобы поставить первый вопрос на странице, придерживайтесь JQuery нотации, и не вернуться к родной getElementById:

$("#questionLoc").text(allQuestions[0].question);

Обратите внимание, что лучше использовать метод text() над html(), когда вы помещая простой текст. html() следует использовать, когда вы вставляете содержимое с тегами HTML.

источник

2017-02-08 21:16:59 trincot

Чувствуйте себя как костяк ... полностью проигнорировал тэг jquery. сделало бы мой образец немного более аккуратным ... – Snowmonkey

var qLoc = document.getElementById("questionLoc").innerHTML; qLoc = allQuestions[0].question;

Должно быть изменено

var qLoc = document.getElementById("questionLoc"); qLoc.innerHTML = allQuestions[0].question;

В первом случае и сохранить фактическую строку, которую вы хотите изменить в var qLoc. Вещь, которую вы хотите сохранить, - это сам элемент.

источник

2017-02-08 21:02:50

Использование 'innerHTML' для хранения простого текста - не самая лучшая идея ... – trincot

Вы правы, текстовый узел также можно использовать. Более безопасный. –

hmmm все еще не меняет текст. Предупреждение по-прежнему не отображается ... – Alex

Самая большая проблема заключается в том, что вы хотите сохранить элемент вопроса, а затем установить его атрибут innerHtml. То же самое с любым элементом ответа. Конечно, по мере того, как я делал ответы в своих элементах демо-версии, вы должны вместо этого установить свой текстовый атрибут.

Отредактировано, поскольку я понял, что jQuery был тегом в этом. Теперь используйте это для редактирования HTML-элементов и для итерации элементов ответа.

var allQuestions = []; 
 

 
function question(question, choices, answer) { 
 
    this.question = question; 
 
    this.choices = choices; 
 
    this.answer = answer; 
 
}; 
 

 
var question1 = new question("Who is Sansa\'s mother?", ["Cercei", "Marjorie", "Catelin", "Lysa"], 2); 
 
var question2 = new question("Who is Geoffrey\'s mother?", ["Cercei", "Marjorie", "Catelin", "Lysa"], 0); 
 
var question3 = new question("Who is Robert\'s mother?", ["Cercei", "Marjorie", "Catelin", "Lysa"], 3); 
 

 
allQuestions.push(question1, question2, question3); 
 

 
$(document).ready(function() { 
 
    var questionEl = $(".questionEl"); 
 
    var answerEl = $(".answerEl"); 
 
    var buttonEl = $("#beginTest"); 
 
    var selectEl = $("<select>"); 
 
    var optionEl = $("<option>"); 
 
    var questionIndex = 0; 
 
    buttonEl.on("click", function() { 
 
    nextQuestion(); 
 
    }); 
 

 
    function nextQuestion() { 
 
    questionEl.html(allQuestions[questionIndex].question); 
 
    var thisAnswerEl = selectEl.clone(); 
 
    answerEl.html(thisAnswerEl); 
 
    $.each(allQuestions[questionIndex].choices, function() { 
 
     var thisOptionEl = optionEl.clone(); 
 
     thisOptionEl.attr("value", this).text(this); 
 
     thisAnswerEl.append(thisOptionEl); 
 
    }) 
 
    buttonEl.attr("value", "Next Question"); 
 
    questionIndex++; 
 

 
    } 
 

 
});

#questionEl { 
 
    background-color: #999; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header> 
 
    <h1>Game of Thrones Trivia Quiz</h1> 
 
</header> 
 
<form action="" name="mainForm"> 
 
    <p>Please choose the correct answer for the question given. Do so promptly - winter is coming.</p> 
 
    <div class="questionEl"> 
 
    </div> 
 
    <div class="answerEl"> 
 

 
    </div> 
 
    <div class="button-container"> 
 
    <input id="beginTest" type="button" value="Begin!" /> 
 
    </div>

источник

2017-02-08 21:16:23 Snowmonkey

И да, это будет ошибка, когда вы передадите конец массива вопросов. Помимо объема этого упражнения ... – Snowmonkey

Изменение html-текста с помощью JavaScript

ответ

Смежные вопросы