html输入将变量保存到javascript文件中

vuktfyat  于 2021-09-23  发布在  Java
关注(0)|答案(4)|浏览(295)

我正在尝试将用户输入从html文件保存到 .js 文件有人能帮我,教我怎么做吗?
html文件

<form >
  <label for="size">Enter size:</label>
  <input type="text" id="size" ><br>
  <label for="color">Enter color:</label>
  <input type="text" id="color"><br>
  <input type="submit" value="Submit">
</form>

javascript文件

var item_size = ""
var item_color = ""
// (here the codes continues but i need only to save user input on this 2 var.)

这2个部分需要在2个单独的文件中,a .html.js 一个,而不是在一个html上。

2ekbmq32

2ekbmq321#

可以避免使用表单和使用getelementbyid获取所有值。这里有一个这样做的示例脚本

function getData() {
    var item_size = document.getElementById('size').value
    var item_color = document.getElementById('color').value
    document.getElementById('size').value = ""
    document.getElementById('color').value = ""
    console.log(item_size)
    console.log(item_color)
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="script.js"></script>
</head>
<body>
        <label for="size">Enter size:</label>
        <input type="text" id="size" ><br>
        <label for="color">Enter color:</label>
        <input type="text" id="color"><br>
        <input type="button" onclick="getData()" value="Submit">
</body>
</html>
hfyxw5xn

hfyxw5xn2#

在代码中进行以下更改。单击submit按钮或根据您的需求调用java脚本方法的任何其他事件。还有一个建议,在方法中声明这些变量,否则它将成为全局变量,这不是一个好的做法。
java脚本

var item_size = ""
var item_color = ""

function saveValue() {
 item_size = document.getElementById("size").value;
 item_color = document.getElementById("color").value;

 console.log(item_size);
 console.log(item_color);
}

html

<label for="size">Enter size:</label>
<input type="text" id="size"><br>
<label for="color">Enter color:</label>
<input type="text" id="color"><br>
<input type="submit" value="Submit" onclick="saveValue()">
4dbbbstv

4dbbbstv3#

倾听声音 submit 表单上的事件。每当单击表单中的submit按钮或通过键盘输入触发时,将触发此事件。
使用formdata api,您可以将表单中的所有值提取到单个对象中。这些值将基于 name 属性在 <input> 字段,因此请确保这些属性存在。
阻止默认提交事件以防止表单触发重新加载。

const form = document.forms['item-form'];
form.addEventListener('submit', event => {
  const formData = new FormData(form);
  const itemSize = formData.get('size');
  const itemColor = formData.get('color');
  console.log(itemSize, itemColor);
  event.preventDefault();
});
<form name="item-form">
  <label for="size">Enter size:</label>
  <input type="text" id="size" name="size"><br>
  <label for="color">Enter color:</label>
  <input type="text" id="color" name="color"><br>
  <input type="submit" value="Submit">
</form>
a0x5cqrl

a0x5cqrl4#

使用 document 对象后跟 getElementById 功能。在括号内,打开一个引号,在括号内写输入的id,在 getElementById 函数写入 .value . 代码如下:

<form>
  <label for="size">Enter size:</label>
  <input type="text" id="size" ><br>
  <label for="color">Enter color:</label>
  <input type="text" id="color"><br>
  <input type="submit" value="Submit">
</form>
var item_size = document.getElementById("size").value;
var item_color = document.getElementById("color").value;

相关问题