在继续脚本之前获取函数的结果

Question

我试图使用vanilla JS重新创建"提示"功能，其中出现输入文本，用户键入某些内容，然后"警报"显示键入的文本。

但我真的很困 - 我如何接收键入的文本以发送警报。

考虑到警报将超出提示功能，就像我使用本机解决方案一样。

function nativePrompt(message) {
  var greeting = prompt(message);
  return greeting
}
function recievedMessage(message) {
var message = nativePrompt(message);
alert(message);
}

<button onclick="recievedMessage('Say Hi')">Native Prompt</button>

这是我所在的地方：

function myPrompt(message) {
  var wrap = document.createElement('div');
	wrap.setAttribute("id", "wrap");
  
  var input = document.createElement('input');
  input.setAttribute("id","input");
  input.setAttribute("type","text");
  
  var button = document.createElement('button');
  button.setAttribute("id","button");
  button.innerHTML = "OK";
  button.onclick = function() {
    result = document.getElementById('input').value;
    document.getElementById('wrap').remove();
    return result;
  }
  
  wrap.innerHTML = message;
  wrap.appendChild(input);
  wrap.appendChild(button);
  
  document.body.appendChild(wrap);
}
function receiveResult() {
var result = myPrompt("Say Hi!!");
alert(result);
}

#wrap {
width:100%;
height:60px;
background:yellow;
}

<button onclick="receiveResult()">Show My Prompt</button>

请注意，函数recieveResult应提醒 myPrompt 函数的返回。但它返回未定义，因为脚本在返回之前继续。

Answer 1

您误解了一些事件处理概念。 单击处理程序中的return result;实际上不会将结果返回到任何有意义的位置。

因此，此行var result = myPrompt("Say Hi!!");实际上并不返回自定义提示中写入的内容。您需要获取并提醒 ok 按钮单击事件中输入框的值，而不是返回它。

function myPrompt(message) {
  var wrap = document.createElement('div');
	wrap.setAttribute("id", "wrap");
  
  var input = document.createElement('input');
  input.setAttribute("id","input");
  input.setAttribute("type","text");
  
  var button = document.createElement('button');
  button.setAttribute("id","button");
  button.innerHTML = "OK";
  button.onclick = function() {
    result = document.getElementById('input').value;
    document.getElementById('wrap').remove();
    alert( result );
    // do the alert here instead of inside the other function
    // would be wise to rename both functions.
  }
  
  wrap.innerHTML = message;
  wrap.appendChild(input);
  wrap.appendChild(button);
  
  document.body.appendChild(wrap);
}
function receiveResult() {
  myPrompt("Say Hi!!");
  // var result won't be available here.
}

#wrap {
width:100%;
height:60px;
background:yellow;
}

<button onclick="receiveResult()">Show My Prompt</button>

---

使用回调：

function renderPrompt(message,callback) {
  var wrap = document.createElement('div');
	wrap.setAttribute("id", "wrap");
  
  var input = document.createElement('input');
  input.setAttribute("id","input");
  input.setAttribute("type","text");
  
  var button = document.createElement('button');
  button.setAttribute("id","button");
  button.innerHTML = "OK";
  button.onclick = function handleClick() {
    result = document.getElementById('input').value;
    document.getElementById('wrap').remove();
    callback( result );
    // Call the callback we received to pass the result back.
  }
  
  wrap.innerHTML = message;
  wrap.appendChild(input);
  wrap.appendChild(button);
  
  document.body.appendChild(wrap);
}
function page1Prompt() {
  renderPrompt("Say Hi!!", function( result ) {
    alert( result );
  });
  // var result won't be available here.
}
// You can now pass different functions to renderPrompt() to reuse the function.
function page2Prompt() {
  renderPrompt("Say Hi!!", function( result ) {
    alert( 'the other page also has a result: ' + result );
    console.log( result );
    // someOtherFunctionThatMightNeedResult( result );
  });
}

#wrap {
width:100%;
height:60px;
background:yellow;
}

<button onclick="page1Prompt()">Show My Prompt for Page 1</button>
<button onclick="page2Prompt()">Show My Prompt for Page 2</button>