однострочный ввод javascript не останавливается для каждой функции

#javascript

Вопрос:

пытаюсь создать однострочное поле ввода для нескольких значений с помощью 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';
}

Спасибо!

1. Что именно означает » без перехода к концу «?

2. когда я запускаю myFunction (), я вижу последнюю функцию getTime (), запущенную на html-странице. Мне нужно просмотреть каждую функцию одну за другой.

3. Что вызывает тот факт, что вы должны запустить следующую функцию? В любом случае, когда у вас есть несколько отложенных операций для запуска одна за другой, просто используйте очередь.

Ответ №1:

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

При onChange или вводе всегда будет вызываться nextFunction .

Затем установите его следующим образом:

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

Сделайте аналогично для других функций. Тогда функция будет выполняться только в нужное время, и при каждом запуске она переключается на следующую функцию в списке.

1. Вам нужно сделать nextFunction() — вы забыли скобки, которые делают это вызовом функции. Но это не то, что вам все равно сказали делать, я сказал вызывать nextFunction из onOchange .

Ответ №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>