Question

尝试使用JavaScript为多个值创建单行输入字段。这是我的做法。如何逐步执行每个功能而不跳到最后？

function myFunction() {
  getName();
  getPhone();
  getPickupAddress();
  getDestination();
  getDate();
  getTime();
}

function getName(){
  var client = document.getElementById('CustomerName').value;
  document.getElementById('text').innerHTML=client;
  document.getElementById('CustomerName').value='';
}

function getPhone(){
document.getElementById('CustomerName').id='CustomerPhone';  
  document.getElementById('CustomerPhone').placeholder='Your Phone Number';
  var phone = document.getElementById('CustomerPhone').value;
  document.getElementById('CustomerPhone').value='';
}

function getPickupAddress(){
  document.getElementById('CustomerPhone').id='CustomerAddress';
document.getElementById('CustomerAddress').placeholder='Pick Up Address';  
}
function getDestination(){
  document.getElementById('CustomerAddress').id='Destination';
  document.getElementById('Destination').placeholder='Destination';
}
function getDate(){
  document.getElementById('Destination').id='Date';
  document.getElementById('Date').placeholder='Pick Up Date';
}
function getTime(){
  document.getElementById('Date').id='Time';
  document.getElementById('Time').placeholder='Pick Up Time';
}

谢谢！

Answer 1

不要一次运行所有函数，而是将其放在文本字段的onChange中。然后当字段改变时它将运行它。您可能还想绑定回车键来运行您的功能。

在onChange中或输入将始终调用nextFunction。

然后像这样设置：

var nextFunction = getName;
function getName(){
  ..........
  nextFunction = getPhone;
}

对其他功能做同样的事情。然后该函数将仅在正确的时间运行，并且每次运行时它都会切换到列表中的下一个函数。

Answer 2

的JavaScript

function getName(){
    var client = document.getElementById('CustomerName').value;
    document.getElementById('text').innerHTML="<p>Customer Name: " + client +"</p>";
    document.getElementById('CustomerName').value='';
    document.getElementById('CustomerName').id='CustomerPhone';
    document.getElementById('CustomerPhone').placeholder='Your Phone Number';
    document.getElementById('CustomerPhone').type='tel';
    document.getElementById('myBtn').onclick = getPhone;
}

function getPhone(){

    var phone = document.getElementById('CustomerPhone').value;
    document.getElementById('CustomerPhone').value='';
    document.getElementById('text').innerHTML+="<p>Customer Phone: " + phone +"</p>";
    document.getElementById('myBtn').onclick = getEmail;
    document.getElementById('CustomerPhone').id='CustomerEmail';
    document.getElementById('CustomerEmail').placeholder='Your Email';
    document.getElementById('CustomerEmail').type='email';
}
function getEmail(){

    var email = document.getElementById('CustomerEmail').value;
    document.getElementById('CustomerEmail').value='';
    document.getElementById('text').innerHTML+="<p>Customer Email: " + email +"</p>";
    document.getElementById('myBtn').onclick = getPickupAddress;
    document.getElementById('CustomerEmail').id='from';
    document.getElementById('from').placeholder='Pick Up Address';
    document.getElementById('from').class='ui-bar-c';
}

...

HTML

<input type='text' id='CustomerName' name="Customer" placeholder='Your Name'>
<button id="myBtn" onclick='getName()'>next</button>

javascript单行输入不会在每个函数上停止

2 个答案: