Question

我试图使用香草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!!");实际上不会返回您的自定义提示中写的内容。您需要获取并警告“确定”按钮单击事件内的输入框的值，而不是返回它。

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>

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

1 个答案: