2017-11-26 10 views
0

JavaScriptでポップアップを作成していますが、コードに問題があります。私はポップアップを作成しようとしています。ユーザーがテキスト入力に数字を入れることができます(1〜10秒の間)。ポップアップは、彼が置く秒数の後に表示されます。あなたが人生の兆候を与えないのでタイムアウト関数をJavaScriptのテキスト入力と照合するにはどうすればよいですか?

function popup() {  
 
    document.getElementById("outside").style.display = "block"; 
 
} 
 
setTimeout(popup, 3000); 
 
function span3() { 
 
    document.getElementById("outside").style.display="none"; 
 
} 
 
// catching the value from the user (lets say numbers between 1-5) 
 
var x; 
 
x = document.getElementById("puttime").value; 
 
// putting the value that got into the settimeout 
 
if (x=2) { 
 
    document.getElementById("mybutton").onclick = setTimeout(popup, x); 
 
}
<input type="text" id="puttime"> 
 
<button id="mybutton" onclick="setTimeout(popup, 3000);">few seconds</button> 
 
<div id="outside"> 
 
    <div id="thediv"> 
 
    <p>Some text in the Modal..</p> 
 
    <p id="close" onclick="span3()">&times;</p> 
 
    </div> 
 
</div>

+0

なり申し訳ありません少し直接的ですが、読める質問とコードを書く努力が期待されます。私はあなたのために清掃をしました。次回は気をつけてください:-) – leaf

答えて

1

は、私はあなたが欲しいものを推測することに決めました:-D

var popup = document.getElementById("popup"); 
 
var input = document.getElementById("popup-delay"); 
 
var showButton = document.getElementById("popup-show"); 
 
var closeButton = document.getElementById("popup-close"); 
 

 
showButton.addEventListener("click", function onShowClick() { 
 
    // get the user input and convert it into a number 
 
    var value = parseInt(input.value, 10); 
 
    // if the input is not a number 
 
    if (isNaN(value)) { 
 
    // warn the user 
 
    alert("NaN (Not A Number) !"); 
 
    } 
 
    // otherwise 
 
    else { 
 
    // convert milliseconds to seconds 
 
    var delay = value * 1000; 
 
    // turn off the click listener on the "Show" button 
 
    showButton.removeEventListener("click", onShowClick); 
 
    // start the countdown to show the popup 
 
    setTimeout(function() { 
 
     // show the popup 
 
     popup.style.display = "block"; 
 
     // turn on the click listener on the "Close" button 
 
     closeButton.addEventListener("click", function onCloseClick() { 
 
     // turn off the click listener on the "Close" button 
 
     closeButton.removeEventListener("click", onCloseClick); 
 
     // turn on the click listener on the "Show" button 
 
     showButton.addEventListener("click", onShowClick); 
 
     // hide the popup 
 
     popup.style.display = "none"; 
 
     }); 
 
    }, delay); 
 
    } 
 
});
#popup { 
 
    display: none; 
 
    position: absolute; 
 
    top: 0; right: 0; bottom: 0; left: 0; 
 
    background: yellow; 
 
    padding: 1em; 
 
}
Delay: <input type="text" id="popup-delay" /> 
 
<button type="button" id="popup-show">Show</button> 
 
<div id="popup"> 
 
    <p>I am a popup :-)</p> 
 
    <button type="button" id="popup-close">Close</button> 
 
</div>

関連する問題