Блог

#javascript

#javascript

Вопрос:

 function notify() {
  alert("Welcome to my form");
  var name = prompt("Enter your name");
  var city = prompt("Which city you are living in");
  var mobile = prompt("Enter your phone number");
}

function nextStep() {
  var a = document.getElementById("showUp");
  if (a.style.display === "none") {
    a.style.display = "block";
    document.getElementById("name").innerHTML = "Your name is "   name;
    document.getElementById("city").innerHTML = "Your city is "   city;
    document.getElementById("mobile").innerHTML = "Your phone number is "   mobile;
  } else {
    x.style.display = "none";
  }
}  

 <p>Click the button to display an alert box.</p>
<button onclick="notify()">Try it</button>
<div id="showUp" style="display: none;">
  <button onclick="nextStep()">See your input</button>
</div>
<p id="name"></p>
<p id="city"></p>
<p id="mobile"></p>  

Комментарии:

1. Ваш nextStep вызов находится внутри скрытого элемента, поэтому на самом деле он никогда не вызывается. Может быть, попробуйте вызвать ее из notify ?

2. Откуда вы получаете x.style.display = «none»;? также ваша функция NeXTSTEP скрыта.

3. И ваш var name виден только внутри этой функции, а не глобально

Ответ №1:

 function myFunc() {
// do thing
}

myFunc(); // This executes the function above.
  

 function notify() {
  alert("Welcome to my form");
  var name = prompt("Enter your name");
  var city = prompt("Which city you are living in");
  var mobile = prompt("Enter your phone number");

  nextStep(); // Add
}
  

 var name;
var city;
var mobile;

function notify() {
  alert("Welcome to my form");
  name = prompt("Enter your name");
  city = prompt("Which city you are living in");
  mobile = prompt("Enter your phone number");

  showButton();
}

function showButton() {
  var a = document.getElementById("showUp");
  if (a.style.display === "none") {
    a.style.display = "block";
  } else {
    a.style.display = "none";
  }
}

function nextStep() {
  document.getElementById("name").innerHTML = "Your name is "   name;
  document.getElementById("city").innerHTML = "Your city is "   city;
  document.getElementById("mobile").innerHTML = "Your phone number is "   mobile;
}
  

Комментарии:

1. Если он только хочет отобразить кнопку, то он может просто поставить document.getElementById("showUp").style.display = "block"; вместо nextStep(); здесь.

2. @mr.mams Я в курсе. Я считаю, что путаница кроется в фундаментальных принципах. Не в деталях.

3. вы совершенно правы. Но моя точка зрения была больше о приближении к «требованиям»: при изучении основ также важно как можно больше придерживаться требований (или выявлять их должным образом, в зависимости от того, откуда OP получил это требование).

4. Однако ввод будет отображаться без нажатия пользователем кнопки. Я не уверен, в чем проблема в данном случае.

Ответ №2:

 var name="";
var city ="";
var mobile ="";
// 1. first declare varibales outside of functions


function notify() {
  alert("Welcome to my form");
  
  name = prompt("Enter your name");
  city = prompt("Which city you are living in");
  mobile = prompt("Enter your phone number");
// 2. fill variables with data  
  
  var a = document.getElementById("showUp");
  a.style.display = "block";
// 3. show button after   prompt's are done
}

function nextStep() {
    document.getElementById("name").innerHTML = "Your name is "   name;
    document.getElementById("city").innerHTML = "Your city is "   city;
    document.getElementById("mobile").innerHTML = "Your phone number is "   mobile;
// 4. now you can use those varaibles with data to show to user    
}  

 <p>Click the button to display an alert box.</p>
<button onclick="notify()">Try it</button>
<div id="showUp" style="display: none;">
  <button onclick="nextStep()">See your input</button>
</div>
<p id="name"></p>
<p id="city"></p>
<p id="mobile"></p>  

Комментарии:

1. Данные, собранные для имени, города и мобильного телефона, в этом случае отображаться не будут. Вместо этого это [object HTMLParagraphElement].

2. @p_w_hh Загляни в область JavaScript

3. @p_w_hh У вас есть рабочий пример перед вами. Внимательно посмотрите на мой комментарий и изменения, которые я внес. Это работает так, как я сделал это в сниппете, нажмите выполнить фрагмент кода. Если он не отображал значения, это означает, что вы не объявляли переменные сначала вне функций, как я, а затем заполняли их данными внутри. Также порядок вещей очень важен.

4. Блестяще! Я понял, вероятно, самой большой ошибкой было то, что я запутался между глобальной и локальной переменной, я чувствую себя так плохо. Большое вам спасибо за прояснение этого

5. @p_w_hh Нет проблем, это весь процесс обучения. Область видимости JS может быть сложной при запуске и даже позже для более сложных сборок. Могу я спросить, почему вы приняли ответ с наименьшим количеством голосов, который на самом деле не решает всех проблем, с которыми вы сталкиваетесь, и это не лучшее решение вашей проблемы в целом? Это будет сбивать с толку любого, кто читает эту тему…

Ответ №3:

 <div id="seeYourInputButton"></div>
  

 document.getElementById("seeYourInputButton").innerHTML = "<button onClick="nextStep()" >See your Input</button>