Question

我需要创建一个表单，显示我拥有的现有对象的不同属性。

根据用户输入的输入字段，该输入应更新对象值。例如，假设您有一个名为car的对象，其值为：

brand:"Porsche", 
model:"GT3", 
year:2004, 
colour:"White"

使用您的表单，用户可以输入Black来更新保时捷的颜色，或输入Cayenne来更新模型。

我需要在javascript中写这个。我知道如何获取用户输入，但如何将该信息传递给另一个表单并更新该表单的输出？

我必须输出该信息，我创建了一个div来保存内容。我还是学生，这让我很困惑。

Answer 1

你可以这样做。

＆＃13;

const car = {
  brand: 'Porche',
  model: 'GT3',
  year: 2004,
  color: 'white'
}

// update html content that describes your car
const updateHtmlContent = obj => {
  const brand = document.querySelector('#brand span');
  const model = document.querySelector('#model span');
  const year = document.querySelector('#year span');
  const color = document.querySelector('#color span');

  // update corresponding html elements
  brand.textContent = obj.brand;
  model.textContent = obj.model;
  year.textContent = obj.year;
  color.textContent = obj.color;
}

// update your car object based on the input and the call html update function
// triggered by button click
const updateCarContent = obj => {
  // get input fields
  const brandInp = document.querySelector('#brandInp');
  const modelInp = document.querySelector('#modelInp');
  const yearInp = document.querySelector('#yearInp');
  const colorInp = document.querySelector('#colorInp');

  // update car properties only if the corresponding field is not empty
  if (brandInp.value !== '') { obj.brand = brandInp.value; }
  if (modelInp.value !== '') { obj.model = modelInp.value; }
  if (yearInp.value !== '') { obj.year = yearInp.value; }
  if (colorInp.value !== '') { obj.color = colorInp.value; }

  // clear input fields
  brandInp.value = '';
  modelInp.value = '';
  yearInp.value = '';
  colorInp.value = '';

  updateHtmlContent(obj);
}

updateHtmlContent(car);

// get submit button and click event listener to it that will trigger the update function
const submitBtn = document.querySelector('#submit');
submitBtn.addEventListener('click', event => {
  updateCarContent(car);
});

＆＃13;

<p id="brand">brand: <span></span></p>
<p id="model">model: <span></span></p>
<p id="year">year: <span></span></p>
<p id="color">color: <span></span></p>

<label for="brandInp">brand: </label>
<input type="text" id="brandInp" />
<br />

<label for="modelInp">model: </label>
<input type="text" id="modelInp" />
<br />

<label for="yearInp">year: </label>
<input type="text" id="yearInp" />
<br />

<label for="colorInp">color: </label>
<input type="text" id="colorInp" />
<br />

<button id="submit">Update</button>

＆＃13;

Answer 2

以下是一个如何开始的简单示例：创建几个表单，然后将值从一个表单更新到另一个表单。

我故意保持此代码段尽可能小（我们称之为Minimal, Complete, and Verifiable example）。听起来好像javascript中的读/写值是让你困惑的部分，所以这就是我真正关注的部分。

var oldMake = document.querySelector('#f1 input[name=make]');
var newMake = document.querySelector('#f2 input[name=make]');
newMake.value = oldMake.value + ' (add something)';

<form id='f1'>
<input type='text' name='make' value='Porsche'/>
<input type='text' name='model' value='911'/>
</form>

<form id='f2'>
<input type='text' name='make'/>
<input type='text' name='model'/>
</form>

创建一个将用户输入传递给另一个表单的表单

2 个答案: