Question

我有一个学校项目，他们要求我们创建一个表单，您可以在其中输入值，然后单击“提交”，将会出现一个新的便笺，并将该表单中的值填充。我的问题是我不明白如何编写使用表单中的值创建注释的函数。

我已经完成了页面的表单和设计。还启动了创建便笺的功能。

这是表格：

<form id="form1">
Mission Details: <textarea name="Details" rows="3" cols="20"></textarea> <br> <br>
Mission Due Date: <input type="Date" name="Date"> <br> <br>
Mission Due Time: <input type="Text" name="Time"> <br> <br>
<button type="button" onsubmit="createNote()"> Submit </button> 
<button type="button" onclick="Clear()"> Clear </button>
</form>

这是我开始的脚本：

function CreateNote(event) {
var form = event.currentTarget; 
var details = form.Details.value;
var date = form.Date.value;
var time = form.Time.value;
}
var form = document.getElementById('form1');
form.onsubmit = CreateNote();

这是便笺和便笺内容的div：

<div class="note">
    <div class="noteDetails"> 

    </div>
</div>

最终，该注释将具有CSS文件中图像的背景，并且在该注释内部，将具有来自表单的值。

Answer 1

1。。为笔记创建一个模板，可以说您用<p></p>显示文本。

2。。将其保留为空值。为其指定一个ID，将其命名为"details"。

3。。获得所需的值后，使用document.getElementById("details")，并用值填充<p>。

<div class="note">
    <div class="noteDetails"> 
        <p id="details"></p>
    </div>
</div>

然后您就可以在JavaScript中使用

var stringInput = "Some String";
var detailsElement = document.getElementById("details");
detailsElement.innerHTML = " stringInput;

Answer 2

您现在可以使用div noteDetails。在其内部创建三个p元素，其ID为details，date和time。

例如：

<div class="noteDetails">
  <p id="details"></p>
  <p id="date"></p>
  <p id="time"></p>
</div>

将按钮元素更改为：

<button type="button" onclick="createNote()"> Submit </button>

注意：您在html中使用createNote()在JS中使用CreateNote

在您的createNote函数中，只需添加

function createNote() {
  var form = document.getElementById('form1'); 
  var details = form.Details.value;
  var date = form.Date.value;
  var time = form.Time.value;

  var detailsPara = document.querySelector('#details');
  detailsPara.innerText = details;

  var datePara = document.querySelector('#date');
  datePara.innerText = date;

  var timePara = document.querySelector('#time');
  timePara.innerText = time;
}

从代码中删除行

var form = document.getElementById('form1');
form.onsubmit = CreateNote();

更新：如果要立即显示输入值，则将其添加到html

Mission Details: <textarea name="Details" rows="3" cols="20" oninput="createNote()"></textarea> <br> <br>
Mission Due Date: <input type="Date" name="Date" oninput="createNote()"> <br> <br>
Mission Due Time: <input type="Text" name="Time" oninput="createNote()"> <br> <br>

将表单输入值输入到新创建的div“ note”

2 个答案: