将文本输入中的值传递给 javascript 函数答案

【问题标题】：Passing value from text input into javascript function将文本输入中的值传递给 javascript 函数
【发布时间】：2011-12-18 21:55:07
【问题描述】：

在我的 html 文件中，我调用了一个带有两个参数的 javascript 函数，其中第二个参数是应该保存的文件的名称。

<a id="record_button" onclick="Recorder.record('audio', 'test.wav');" href="javascript:void(0);" title="Record"><img src="images/record.png" width="24" height="24" alt="Record"/></a>

我想创建一个动态变量，它从文本字段中获取值并将其作为第二个参数（而不是 test.wav）转发，以便用户可以确定文件的名称。

<label for="filename">Filename</label>
<input name="filename" type="text">

谢谢。

【问题讨论】：

标签： javascript html input textfield

【解决方案1】：

如果你给你的用户输入一个id属性，这会更容易：

<input name="filename" id="filename" type="text">

现在您可以通过以下方式访问 Javascript 中的值：

document.getElementById('filename').value

请注意，如果您不控制Recorder.record() 方法，则需要首先验证用户输入（至少，验证他们是否输入了某些内容）。我建议将其移至单独的函数，例如：

function recordToFilename() {
    var input = document.getElementById('filename'),
        fileName = input.value;
    if (fileName) {
        Recorder.record('audio', fileName);
    } else {
        alert('Please enter a filename!');
        input.focus();
    }
}

然后就使用那个函数：

<a id="record_button" onclick="recordToFilename();" href="javascript:void(0);" title="Record"><img src="images/record.png" width="24" height="24" alt="Record"/></a>

工作示例：http://jsfiddle.net/nrabinowitz/GFpRy/

【讨论】：

好一个。只需在下面添加fileName.focus() 到alert :)
@Márcio - 好主意 - 添加在上面。您也可以将alert 设为prompt，然后完全放弃输入...
感谢您的回复。我已经在我的 HTML 文件中创建了一个，并且与您所写的完全一样。但是，当我按下录制按钮时没有任何反应。一旦我将 onclick 更改为 Recorder.record('audio', 'test.wav');它可以工作，但是当更改为 recordToFilename();它没有
您是否收到任何 Javascript 错误？你是如何定义函数的？请参阅我上面包含的工作示例。

【解决方案2】：

Recorder.record('audio', document.yourformname.filename.value)

请确保您的表单具有name="?" 属性以使其正常工作，并将yourformname 替换为您输入的表单名称。 filename 也指输入的name 属性。

【讨论】：

【解决方案3】：

<html>
<head>
  <script>
     function addData (fn, ln, em) {

       console.log(fn);
       console.log(ln);
       console.log(em);

     }
 </script>
</head>
<body>
    <input Type="text" name="FirstName" id="fn">
    <input Type="text" name="LastName" id="ln">
    <input Type="email" name="Email" id="em">
    <button onClick="addData(fn.value,ln.value,em.value)">click</button> 
</body>
</html>

【讨论】：

请在您的答案中添加解释。
当 javascript 代码修复但 html 字段 id 更改时，我们可以使用此代码。
我可以解决，但如果 OP 经验不足，我怀疑 OP 可以解决（尽管在 6 年的 JavaScript 之后他可能应该能够）。