HTML и Javascript - кнопка не работает

Я пытаюсь закончить свой окончательный проект для моего вступительного курса по веб-разработке (я очень новичок в javascript и html), который представляет собой простой проект Mad Libs. Я весь день сталкивался с проблемами, пытаясь заставить его работать, и я думаю, что я в значительной степени искоренил большинство ошибок. Тем не менее, я действительно ударил по дорожному блоку, используя кнопку, которую я использую, которая должна загружаться в результатах и вызывать функцию, которая строит историю, используя прослушиватель событий в файле javascript. Когда я запускаю свою программу, кнопка ничего не делает. Я проверил консоль разработчика Google Chrome, и у меня нет сообщений об ошибках или что-то еще, поэтому я не знаю, что я делаю неправильно.HTML и Javascript - кнопка не работает

Вот мой Javascript файл (с именем mad_libs_1.js):

var story = document.querySelector("#story"); 
var adjective1 = document.querySelector("#adjective1"); 
var verbEndingInED = document.querySelector("#verbEndingInED"); 
var nounPlural1 = document.querySelector("#nounPlural1"); 
var liquid = document.querySelector("#liquid"); 
var nounPlural2 = document.querySelector("#nounPlural2"); 
var famousPerson = document.querySelector("#famousPerson"); 
var place = document.querySelector("#place"); 
var occupation = document.querySelector("#occupation"); 
var noun1 = document.querySelector("#noun1"); 
var nationality = document.querySelector("#nationality"); 
var femaleCelebrity = document.querySelector("#femaleCelebrity"); 
var noun2 = document.querySelector("#noun2"); 
var femaleFriend = document.querySelector("#femaleFriend"); 
var nounPlural3 = document.querySelector("#nounPlural3"); 
var number = document.querySelector("#number"); 
var adjective2 = document.querySelector("#adjective2"); 

//event listener for the button 
var finished = document.querySelector("#finished"); 
if(finished){ 
    finished.addEventListener("click", createStory, false); 
} 


function createStory(){ 
    console.log("createStory HAS BEEN CALLED"); 
    var finalStory = ""; 
    finalStory += "I enjoy long, " + adjective1.bold(); 
    finalStory += " walks on the beach, getting " + verbEndingInED.bold(); 
    finalStory += " in the rain and serendipitous encounters with " + nounPlural1.bold(); 
    finalStory += ". I really like piña coladas mixed with " + liquid.bold(); 
    finalStory += ", and romantic, candle-lit " + nounPlural2.bold(); 
    finalStory += ". I am well-read from Dr. Seuss to " + famousPerson.bold(); 
    finalStory += ". I travel frequently, especially to " + place.bold(); 
    finalStory += ", when I am not busy with work. (I am a " + occupation.bold(); 
    finalStory += ".) I am looking for " + noun.bold(); 
    finalStory += " and beauty in the form of a " + nationality.bold(); 
    finalStory += " goddess. She should have the physique of " + femaleCelebrity.bold(); 
    finalStory += " and the " + noun2.bold(); 
    finalStory += " of " + femaleFriend.bold(); 
    finalStory += ". I would prefer if she knew how to cook, clean, and wash my " + nounPlural3.bold(); 
    finalStory += ". I know I’m not very attractive in my picture, but it was taken " + number.bold(); 
    finalStory += " days ago, and I have since become more " + adjective2.bold() + "."; 
    story.innerHTML = finalStory; 
    console.log(story + " IS THE STORY"); 
}

и вот мой HTML:

<!DOCTYPE HTML> 
<html> 
    <head> 
     <meta charset="utf-8" /> 
     <title>Mad Libs 1</title> 
     <script type="text/javascript" src="mad_libs_1.js"></script> 
    </head> 
    <body lang="en-US"> 
     <div class="container-fluid"> 
      <h1>Mad Libs 1</h1> 
     </div> 
     <div class="container-fluid"> 
      <ul> 
       <li>Adjective: <input type="text" name="adjective1" id="adjective1"><br> 
       <li>Verb Ending in "ED": <input type="text" name="verbEndingInED" id="verbEndingInED"><br> 
       <li>Noun (Plural): <input type="text" name="nounPlural1" id="nounPlural1"><br> 
       <li>Liquid: <input type="text" name="liquid" id="liquid"><br> 
       <li>Noun (Plural): <input type="text" name="nounPlural" id="nounPlural2"><br> 
       <li>Famous Person: <input type="text" name="famousPerson" id="famousPerson"><br> 
       <li>Place: <input type="text" name="place" id="place"><br> 
       <li>Occupation: <input type="text" name="occupation" id="occupation"><br> 
       <li>Noun: <input type="text" name="noun1" id="noun1"><br> 
       <li>Nationality: <input type="text" name="nationaltiy" id="nationality"><br> 
       <li>Female Celebrity: <input type="text" name="femaleCelebrity" id="femaleCelebrity"><br> 
       <li>Noun: <input type="text" name="noun2" id="noun2"><br> 
       <li>Female Friend: <input type="text" name="femaleFriend" id="femaleFriend"><br> 
       <li>Noun (Plural): <input type="text" name="nounPlural3" id="nounPlural3"><br> 
       <li>Number: <input type="text" name="number" id="number"><br> 
       <li>Adjective: <input type="text" name="adjective2" id="adjective2"><br> 
       <button id="finished">I'M FINISHED!</button> 
      </ul> 
     </div> 
     <div id="story"></div>  
    </body> 
</html>

Я знаю, что мои методы кода, вероятно, небрежный - я просто пытаюсь чтобы заставить его работать, прежде чем я отполирую его. Кроме того, я должен использовать обычный javascript и без jquery. Я ценю любую помощь, которую я получаю от этого, потому что я тщетно работал часами и часами, пытаясь понять, что случилось.

источник

2016-12-13 Matt Mc

Для записи я также попытался использовать Firefox, и там не получилось. –

см., Где вы говорите 'if (закончено)' ... добавьте else, и вы можете увидеть, что 'finished' не найден - все зависит от того, где блок кода относится к элементу html ... если вы запустите код слишком рано, он не найдет кнопку - вот в чем дело, потому что вы загружаете код в голову, тело даже не загрузилось - вы можете добавить атрибут 'defer' в свой скрипт tag –

Это сработало !!! Я бы никогда не догадался, что это проблема. Спасибо огромное! Ты спас меня от лишних часов разочарования! –

В дополнение к предложению @Jaromanda X, попробуйте обернуть свой код в функцию, а затем назначьте эту функцию обработчиком событий window.onload.

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

function runOnLoad() { 
    // all your code in here 
} 

// assign your function as the handler for the onload event 
window.onload = runOnLoad;

Вы могли бы быть заинтересованы, чтобы прочитать этот вопрос для немного больше информации о том, как для запуска кода после загрузки страницы, и несколько различных способов сделать это.

pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it

источник

2016-12-13 04:44:31 Matt

Да, это лучший способ сделать это, чем полагаться на атрибут defer' на скрипт! –

Спасибо за подсказку! Это все, что я хотел бы упомянуть в классе. –

Веб-разработка JavaScript чревата опасностями, такими как эти, это становится легче, поскольку вы делаете больше этого :) – Matt

У вас есть ошибки в коде. bold() не является function, если вы хотите использовать текст bold, вы можете использовать тег <strong>.

Также, если вы хотите получить значение от textbox, вам необходимо использовать свойство value.

function createStory() { 
    console.log("createStory HAS BEEN CALLED"); 
    var finalStory = ""; 
    finalStory += "I enjoy long, <strong>" + adjective1.value+ "</strong>"; 
    story.innerHTML = finalStory; 
    console.log(story + " IS THE STORY"); 
}

я исправил для first textbox вы можете следить за то же самое для остальных.

источник

2016-12-13 04:41:40 Mairaj

На самом деле это должно быть 'adjective1.innerHTML.bold() ', который вызывает метод String.prototype.bold', который является устаревшим методом. – Xufox

Спасибо, я бросил на ошибку ошибку, поэтому я ее исправил. –

@Xufox 'innerHTML' не вернет' значение' 'textbox' – Mairaj

Вы можете использовать addEventListener:

var div = document.getElementById('div'); 
function blah(e) { 

} 
div.addEventListener('click', blah);u

Это сделало бы событие щелчка в JavaScript. Параметр e необходим для этого, потому что он вызывает событие.

источник

2016-12-13 04:44:32

HTML и Javascript - кнопка не работает

ответ

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