Question

我有一个要求在我的网站上发送电子邮件和API密钥的表格。

稍后我需要在HTML中引用这两个变量，但我不知道如何在HTML中引用JavaScript变量或其他解决方法。

我是这种事物的新手，非常感谢您的帮助。这是代码段。

signin.html

<div class="login-page">
        <div class="form">
          <form class="login-form" onsubmit="storevalues(thiss)">
            <input id="email" type="text" placeholder="email"/>
            <input id="apikey"type="text" placeholder="API key"/>
            <button onclick="setLoginFormVars(); alert(apikey)">Sign In</button>

signin.js

function setLoginFormVars(form) {
        var email = "";
        email = document.getElementById("email").value;

        var apikey = "";
        apikey = document.getElementById("apikey").value;
      }

Nyle。

Answer 1

假设您有一个输入html元素：

<input id="my_input></input>

因此，当您想获取用户键入的内容时，这是使用JavaScript进行输入的一种方法：

var user_input=document.getElementById("my_input").value;

最后，如果希望在用户单击表单的提交按钮之后发生这种情况，则必须使用preventDefault方法，以使页面不会重新加载。

Answer 2

如果您要在JavaScript中显示变量以显示网页上的内容，则实际上并没有引用HTML中的变量，而是告诉javascript在HTML的特定区域中显示它们。在下面的代码段中，我使用了.innerHTML来设置特定div的内容，以便用变量content来更新HTML：

var a = "foo"; // eg your email variable
var b = "bar"; // eg your api key variable

let displayDiv = document.getElementById('myDiv');
let displayDiv2 = document.getElementById('myDiv2');

// Adding data attribute:
displayDiv.setAttribute('data-a', a); 
displayDiv2.setAttribute('data-b', b); // Add the attribute data-a (this could be ('data-key', api_key_variable) or a different attribute)

// Adding value to the tags:
displayDiv.innerHTML += a; // Add to the contents of the div with the id 'myDiv' to the variable a

displayDiv2.innerHTML += b; // Add to the contents of the div with the id 'myDiv2' to the variable b

<html>
  <body>
    <div id="myDiv"></div>
    <div id="myDiv2"></div>
  </body>
</html>

设置变量“ onsubmit”以供以后使用

2 个答案: