Question

我有一个难题，因为我是初学者，所以我不明白。

创建一个JavaScript脚本，该脚本将修改网页的DOM。该脚本必须添加一个包含4个元素的表单：名称，电子邮件，消息（文本区域）和提交按钮。每个元素必须包含带有名称的标签。例如，名称字段是输入类型，您仍然必须通过javascript创建一个名为“名称”的标签，除“提交”按钮外，其他标签均与之相同。另外，每个标签都必须具有从javascript添加的颜色（红色，蓝色，黄色）。当您单击“提交”按钮时，它必须有一个警报：“确定要发送此消息吗？”。

谢谢。

Answer 1

我只需要使用Javascript，就只能找到答案使用HTML

Web应用程序使用HTML在视口（浏览器窗口）中包含，呈现和显示元素。

您打算在哪里呈现表单并捕获用户输入？

您可以单独使用JavaScript构建DOM结构，但是仍然会有一个HTML文件，其中包含使用javascript创建的HTML元素。

请明确说明您的期望目标以及此应用程序用于什么类型的应用程序。

为简单起见，我的直觉是您将需要使用HTML作为模板文件，并需要使用JavaScript来交互和操纵HTML文件。

脚本必须添加一个包含4个元素的表单：名称，电子邮件，消息（文本区域）和提交按钮。每个元素必须包含带有名称的标签。例如，名称字段是输入类型，您仍然必须通过javascript创建一个名为“名称”的标签，除“提交”按钮外，其他标签均与之相同。另外，每个标签都必须具有从javascript添加的颜色（红色，蓝色，黄色）。当您单击“提交”按钮时，它必须有一个警报：“确定要发送此消息吗？”。而已。

这是一个开始，只是为了帮助您理解概念。

但是，我确实恳请您放心去探索-您不会破坏任何东西，只需尝试一下！

我建议您尝试看看其中一些文章，看看下面我的代码（非常基本的代码），并随时提出任何问题！

JS：- W3 Schools JS and HTML reference

HTML：- W3 Schools: HTML Forms W3 Schools: Label Tag W3 Schools: Text Area Tag（故意将其排除在解决方案之外，请尝试一下！）

(function divContent() {
//Create a 'div' as a container for our form
var div = document.createElement('div');
// Perhaps you could style it later using this class?? 
div.className = 'row';
// I have used backticks to contain some more normal looking HTML for you to review, it's not complete though!!
div.innerHTML = `<form action="javascript:" onsubmit="alert('Your message here, or, run a function from your JavaScript file and do more stuff!!')">
  <label for="name">Name:</label>
  <input type="text" name="name" id="name" value="Mickey Mouse">
  <br>
  <label for="email">Email:</label>
  <input type="text" name="email" id="email" value="mickey@mouse.co.uk">
  <br><br>
  <input type="submit" value="Submit">
</form> `
// Get the body of the document, and append our div containing the form to display it on page
document.getElementsByTagName('body')[0].appendChild(div);
}());

<!DOCTYPE html>
<html>

	<head>
		
		<meta name="author" content="CoderYen | Wrangling with 0s & 1s Since The Eighties">
		
	</head>

	<body>

	</body>

</html>

专门使用Javascript的表格

1 个答案: