javascript - 为什么我的功能后不显示？

Question

我希望只有在填写完字段后才会出现“查看您的输入”按钮。但努力使按钮出现。请指教。

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>

标签： javascript

Answer 1

没有执行该功能nextStep()。

您需要nextStep()在提示后调用该函数。

您已将功能绑定到单击按钮。但是因为用户看不到按钮，所以它不会运行。

一个函数只有在定义后才调用它来执行。

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
}

或者，您可以将showUp()显示按钮的函数中的逻辑移到notify()函数中。

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;
}