将密钥链接到代码答案

【问题标题】：Linking keys to code将密钥链接到代码
【发布时间】：2016-10-01 15:11:49
【问题描述】：

我对编程很陌生（昨天开始），到目前为止，我刚刚创建了一个非常简单的代码。我目前不知道如何制作它，所以我可以点击进入，它会提交论坛帖子，所以任何关于如何使它成为可能的命令将不胜感激:)

<!DOCTYPE html>
<html>
<head>
<title>Title Changing Simulator!</title>
<script type="text/javascript">
function substitute()  {
var myValue = document.getElementById('myTextBox').value;

if (myValue.length == 0)   {
alert('Please enter a real value in the text box!');
return;
}  
var myTitle = document.getElementById('title');
myTitle.innerHTML = myValue;

}
</script>
</head>
<body>
<h1 id="title">Title Changing Simulator!</h1>

<input type="text" id="myTextBox" />
<input type="submit" value="Click My Button" onclick="substitute()" />
</body>
</html>

【问题讨论】：

访问 CodeSchool.com 并参加他们关于网络编程的免费课程之一。 Rails for Zombies 是一个不错的选择，或者 Node.js 是一个不错的选择。您需要某种服务器端逻辑来获取您尝试发布的信息。其中一门课程将有助于基础知识。祝你好运
这会更新标题 h1 元素。你想完成什么？
with 'click enter'，你的意思是'type enter'，对吧？

标签： javascript html

【解决方案1】：

将您的输入和按钮封装在 <form> 中，并侦听表单的 submit 事件，该事件通过单击提交按钮或在输入字段中按 Enter 键触发。另见How to trigger enter key press of textbox?

const form = document.getElementById('form');
const text = document.getElementById('text');
const title = document.getElementById('title');

form.addEventListener('submit', event => {
  event.preventDefault();

  if (text.value.length > 0) {
    title.textContent = text.value;
  } else {
    alert('Please enter a real value in the text box!');
  }
});

<h1 id="title">Title Changing Simulator!</h1>

<form id="form">
  <input type="text" id="text">
  <input type="submit" value="Update">
</form>

【讨论】：