按下回车键时显示 div答案

【问题标题】：Make div appear when enter is pressed按下回车键时显示 div
【发布时间】：2019-12-23 15:37:40
【问题描述】：

我有一个输入，用户可以在其中输入文本，当用户在键盘上按下回车键时，它会点击按钮“开始！”然后应该会出现“创建 Div”按钮。当用户单击“创建 div”按钮时，将使用用户输入的文本创建一个 div。但是我希望当用户按下回车键时也能点击这个按钮。因此，当用户第一次按“Enter”时，它将单击“Go！”按钮，这将使“创建 Div”按钮出现，然后当用户第二次按下“Enter”时（或者最好在屏幕上显示“创建 Div”按钮时），将使用用户输入的内容创建实际的 div文本。我尝试使用 IF 语句在 Javascript 中执行此操作，但现在当我第一次按“Enter”触发“Go！”时按钮，它会自动触发“创建 Div”按钮，并在按下第一个“Enter”后立即显示 div（取消注释我的 JS 代码的最后一位以了解我的意思）我应该更改什么以获得我想要的结果？

var button = document.getElementById("button");
var createbutton = document.createElement("button");
var creatediv = document.createElement("div");

button.addEventListener('click', function(){
createbutton.innerHTML = "Create Div";
createbutton.style.display = 'inline-block';
document.getElementById("body").appendChild(createbutton);
});

createbutton.addEventListener('click', function(){
createbutton.style.display = 'none';
var input = document.getElementById("input").value;
creatediv.innerHTML = input;
document.getElementById("body").appendChild(creatediv);
});

document.onkeydown = function(event){
if(event.keyCode == 13){
button.click();
}
}

/*if(createbutton.style.display = 'inline-block'){
document.onkeydown = function(event){
if(event.keyCode == 13){
createbutton.click();
}
}
}*/

<body id="body">
<input type="text" id="input" placeholder="Text goes here">
<button id="button">Go!</button>
</body>

【问题讨论】：

标签： javascript html button keyboard

【解决方案1】：

您可以提供您的createbuttonand ID 并检查该元素是否在 DOM 中按下回车时：

var button = document.getElementById("button");
var createbutton = document.createElement("button");
var creatediv = document.createElement("div");

button.addEventListener('click', function(){
    createbutton.innerHTML = "Create Div";
    createbutton.style.display = 'inline-block';
    createbutton.id = 'createButton';
    document.getElementById("body").appendChild(createbutton);
});

createbutton.addEventListener('click', function(){
    createbutton.style.display = 'none';
    var input = document.getElementById("input").value;
    creatediv.innerHTML = input;
    document.getElementById("body").appendChild(creatediv);
});

document.onkeydown = function(event){
    if(event.keyCode === 13) {
        if(document.getElementById('createButton')) {
            createbutton.click();
        } else {
            button.click();
        }
    }
}

<body id="body">
<input type="text" id="input" placeholder="Text goes here">
<button id="button">Go!</button>
</body>

【讨论】：

非常愉快的回答。