Исправлена ​​проблема с блокировкой дисплея, но я думаю, что мой вывод содержит ошибку условного выражения - PullRequest
Новая
       19

Исправлена ​​проблема с блокировкой дисплея, но я думаю, что мой вывод содержит ошибку условного выражения

1 голос
/ 16 марта 2019

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

Редактировать: Итак, мой блок отображения заработал (спасибо за это, ребята), но я попытался добавить условное выражение, чтобы убедиться, что пользователь вводит все поляи теперь моя ошибка выскакивает на странице перед вводом любого ввода.Любая помощь приветствуется 

     const userprompts = document.querySelector("#prompts");
    const userstory = document.querySelector("#story");
    const usererror = document.querySelector("#error");

    const submit = document.querySelector("#submit");
    submit.addEventListener("click", completestory, false);

    const reset= document.querySelector("#reset");
    reset.addEventListener("click", resetPage, false);

    document.querySelector('#name').focus();

    const thename = document.querySelector("#name");
    const firstverb = document.querySelector("#firstverb");
    const firstnoun = document.querySelector("#firstnoun");
    const adjective = document.querySelector("#adjective");
    const secondnoun = document.querySelector("#secondnoun");
    const adverb = document.querySelector("#adverb");
    const place = document.querySelector("#place");
    const storyOutput = document.querySelector("#storyOutput");

    userprompts.classList.add("displayBlock");
    userstory.classList.add("displayNone");
    usererror.classList.add("displayNone");

    function checkStory() {
      if (thename.value == "" && firstverb.value == "" && firstnoun.value == "" && adjective.value == "" && secondnoun.value == "" && adverb.value == "" && place.value == "") {
        error.classname.add("displayBlock");
        return false;
      }
      else {
        return true:
      }
    }

    function completestory() {



      let finishedstory = "";
      finishedstory += "There once was a person named " + thename.value + ". ";
      finishedstory += "One day, " + thename.value + " was " + firstverb.value + " out in the "
      + firstnoun.value + ". ";
      finishedstory += "All of a sudden, " + thename.value + " saw a " + adjective.value +
      " dragon! " ;
      finishedstory += thename.value + " thought for a second and did the only thing that came to mind "
      + " and grabbed a " + secondnoun.value + ". " ;
      finishedstory += "With the " + secondnoun.value + " in hand, " + thename.value + " jumped up and " + adverb.value + " attacked the dragon.";
      finishedstory += " The dragon became very confused and left. Our hero returned to their ancestral home of " + place.value + " ." +  " The End?";

      storyOutput.innerHTML = finishedstory;

      userprompts.classList.add("displayNone");
      userstory.classList.add("displayBlock");
      usererror.classList.add("displayNone");
      userprompts.classList.remove("displayBlock");
      userstory.classList.remove("displayNone");
      usererror.classList.remove("displayBlock");

      if (checkStory == false); {
        return;

      }

    }

    function resetPage() {
      userprompts.classList.add("displayBlock");
      story.classList.add("displayNone");
      error.classList.add("displayNone");
      userprompts.classList.remove("displayNone");
      userstory.classList.remove("displayBlock");
      usererror.classList.remove("displayBlock");
      thename.value = "";
      firstverb.value = "";
      firstnoun.value = "";
      adjective.value = "";
      secondnoun.value = "";
      adverb.value = "";

      storyOutput.innerHTML = "";

      thename.focus();

    }
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <link rel="stylesheet" href="Mod3Layout.css">
    <meta charset="utf-8">
    <title>Sean's Mad Lib</title>
  </head>
  <body>
    <h1> Sean's Wacky Mad Lib</h1><hr>

    <div id="prompts">
      <h3>Please enter your prompts here</h3>
      <p>Enter a name here:
        <input id="name" type="text" placeholder="name">
        </p>
        <p>Enter a verb here:
          <input id="firstverb" type="text" placeholder="verb 1">
          </p>
          <p>Enter a noun here:
            <input id="firstnoun" type="text" placeholder="noun 1">
            </p>
            <p>Enter an adjective here:
              <input id="adjective" type="text" placeholder="adjective">
             </p>
             <p>Enter another noun here:
               <input id="secondnoun" type="text" placeholder="noun 2">
             </p>
             <p>Enter an adverb here:
               <input id="adverb" type="text" placeholder="adverb">
             </p>
             <p>Finally, Enter a place here:
               <input id="place" type="text" placeholder="place"
               </p><br>
             <button id="submit" type="button">Submit</button>
             <p id="error">You did not answer all the questions. Please try
               again</p>
      </div>
      <div id="story">
        <p>Let's see what you wrote.</p>
        <p id="storyOutput">Hello Dave</p>
        <button id="reset" type="button" name="Reset">Reset</button>
        </div>

Ответы [ 3 ]

0 голосов
/ 16 марта 2019

В vanilla JS я бы порекомендовал использовать свойство .style для изменения чего-либо в CSS.

Пример: 

document.getElementById("myDIV").style.display = "none";

Источник:

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style https://www.w3schools.com/jsref/prop_style_display.asp

Но в вашем случае вы пытаетесь добавить класс.

Для добавления класса в vanilla JS я бы рекомендовал метод classList.

Пример добавления: 

const element = document.querySelector("#myDIV");
element.classList.add("mystyle");

Пример удаления: 

const element = document.querySelector("#myDIV");
element.classList.remove("mystyle");

Источник:

https://www.w3schools.com/howto/howto_js_add_class.asp https://www.w3schools.com/howto/howto_js_remove_class.asp

0 голосов
/ 16 марта 2019

Вам нужно добавить классы и удалить их по действиям пользователя.Классы могут быть добавлены с помощью element.classList.add() и удалены с помощью element.classList.remove() Также свойства css не установлены для классов, которые вы пытаетесь добавить.Запустите фрагмент, чтобы увидеть, хотите ли вы этого 

const userprompts = document.querySelector("#prompts");
    const userstory = document.querySelector("#story");
    const usererror = document.querySelector("#error");

    const submit = document.querySelector("#submit");
    submit.addEventListener("click", completestory, false);

    const reset= document.querySelector("#reset");
    reset.addEventListener("click", resetPage, false);

    document.querySelector('#name').focus();

    const thename = document.querySelector("#name");
    const firstverb = document.querySelector("#firstverb");
    const firstnoun = document.querySelector("#firstnoun");
    const adjective = document.querySelector("#adjective");
    const secondnoun = document.querySelector("#secondnoun");
    const adverb = document.querySelector("#adverb");
    const place = document.querySelector("#place");
    const storyOutput = document.querySelector("#storyOutput");

    userprompts.classList.add("displayBlock");
    userstory.classList.add("displayNone");
    usererror.classList.add("displayNone");

    function checkStory() {

    }

    function completestory() {
      let finishedstory = "";
      finishedstory += "There once was a person named " + thename.value + ". ";
      finishedstory += "One day, " + thename.value + " was " + firstverb.value + " out in the "
      + firstnoun.value + ". ";
      finishedstory += "All of a sudden, " + thename.value + " saw a " + adjective.value +
      " dragon! " ;
      finishedstory += thename.value + " thought for a second and did the only thing that came to mind "
      + " and grabbed a " + secondnoun.value + ". " ;
      finishedstory += "With the " + secondnoun.value + " in hand, " + thename.value + " jumped up and " + adverb.value + " attacked the dragon.";
      finishedstory += " The dragon became very confused and left. Our hero returned to their ancestral home of " + place.value + " ." +  " The End?";

      storyOutput.innerHTML = finishedstory;

      userprompts.classList.add("displayNone");
      userstory.classList.add("displayBlock");
      usererror.classList.add("displayNone");
      userprompts.classList.remove("displayBlock");
    userstory.classList.remove("displayNone");
    usererror.classList.remove("displayBlock");
    }

    function resetPage() {
      userprompts.classList.add("displayBlock");
      story.classList.add("displayNone");
      error.classList.add("displayNone");
userprompts.classList.remove("displayNone");
    userstory.classList.remove("displayBlock");
    usererror.classList.remove("displayBlock");
      thename.value = "";
      firstverb.value = "";
      firstnoun.value = "";
      adjective.value = "";
      secondnoun.value = "";
      adverb.value = "";

      storyOutput.innerHTML = "";

      thename.focus();

    }
.displayBlock{
display: block;
}

.displayNone{
display: none;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <link rel="stylesheet" href="Mod3Layout.css">
    <meta charset="utf-8">
    <title>Sean's Mad Lib</title>
  </head>
  <body>
    <h1> Sean's Wacky Mad Lib</h1><hr>

    <div id="prompts">
      <h3>Please enter your prompts here</h3>
      <p>Enter a name here:
        <input id="name" type="text" placeholder="name">
        </p>
        <p>Enter a verb here:
          <input id="firstverb" type="text" placeholder="verb 1">
          </p>
          <p>Enter a noun here:
            <input id="firstnoun" type="text" placeholder="noun 1">
            </p>
            <p>Enter an adjective here:
              <input id="adjective" type="text" placeholder="adjective">
             </p>
             <p>Enter another noun here:
               <input id="secondnoun" type="text" placeholder="noun 2">
             </p>
             <p>Enter an adverb here:
               <input id="adverb" type="text" placeholder="adverb">
             </p>
             <p>Finally, Enter a place here:
               <input id="place" type="text" placeholder="place"
               </p><br>
             <button id="submit" type="button">Submit</button>
             <p id="error">You did not answer all the questions. Please try
               again</p>
      </div>
      <div id="story">
        <p>Let's see what you wrote.</p>
        <p id="storyOutput">Hello Dave</p>
        <button id="reset" type="button" name="Reset">Reset</button>
        </div>
0 голосов
/ 16 марта 2019

Используя jquery, вы можете применить CSS.Пожалуйста, обратитесь к приведенному ниже коду

пример кода для применения css с использованием jquery. 

$("#prompts").css("background-color", "yellow");

пример кода для применения имени класса jquery. 

$( "#prompts" ).addClass( "displayBlock" );

вы можете даже удалить и добавить класс одновременно. 

$( "#prompts" ).removeClass( "displayNone" ).addClass( "displayBlock" );
...