如何将输入的 id 和值传递给 HTML 中的 JS function？

Question

我努力解决这个问题，但我不是 JS 程序员，所以我还没有成功。 我需要在我的 HTML 中编写正确的代码，以将输入的 id 和值传递给 JS function。 这是我的 JS 代码：

    <script>
    function live_update(id,str) {
      if (str.length==0) { 
        document.getElementById("live_update").innerHTML="";
        document.getElementById("live_update").style.border="0px";
        document.getElementById("live_update").style.display="none";
        return;
      }
      if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
      } else {  // code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
      xmlhttp.onreadystatechange=function() {
        if (this.readyState==4 && this.status==200) {
          document.getElementById("live_update").innerHTML=this.responseText;
          document.getElementById("live_update").style.class="bg-light";
          document.getElementById("live_update").style.display="block";
        }
      }
      xmlhttp.open("GET","profiles.php?act=live_update&u_key={u_key}&id="+id+"&q="+str,true);
      xmlhttp.send();
    }
</script>

这是我的 HTML 代码

<input type="text" onfocusout="live_update(document.getElementById('{id}').value,document.getElementById('quantity').value)" name="quantity[]" id="9" value="{quantity}" class="sm-input-40"/>

Answer 1

查看您的代码后，我看到您使用{id} 。 我不知道那是什么，但有一种不同的方法。 代替{id} ，实际上代替整个document.getElementById ，您可以传入this ，这将被视为代码调用的元素的元素。 另外，我在这里看到你犯了一个小错误。

document.getElementById("live_update").innerHTML=this.responseText;
document.getElementById("live_update").style.class="bg-light";      // Here
document.getElementById("live_update").style.display="block";

您不能用样式更改 class。 你必须使用classList 。 将其更改为： document.getElementById("live_update").classList.add("bg-light");

希望我能帮助你解决你的问题:)

Answer 2

这是一个简单的示例，您不需要使事情过于复杂，在这种情况下，您可以将元素传递到 function 到onfocusout处理程序。 我已经评论了您的块代码逻辑并为您制作了示例以捕获该元素的价值和 ID.. hth

 function live_update( el ) { var str = el.value; /* if (str.length == 0) { document.getElementById("live_update").innerHTML = ""; document.getElementById("live_update").style.border = "0px"; document.getElementById("live_update").style.display = "none"; return; } if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else { // code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("live_update").innerHTML = this.responseText; document.getElementById("live_update").style.class = "bg-light"; document.getElementById("live_update").style.display = "block"; } } */ console.log( 'Value: ', el.value, ', ID: ', el.id ) // xmlhttp.open("GET", "profiles.php?act=live_update&u_key={u_key}&id=" + id + "&q=" + str, true); // xmlhttp.send(); }

 <input type="text" onfocusout="live_update( this )" name="quantity[]" id="9" value="{quantity}" class="sm-input-40" />

Answer 3

首先，在 JS 中你不能使用数字 id 选择器。 它会导致错误。

正如大家已经提到的，他们不知道 {id} 来自哪里。 显然它来自一些 PHP 结束模板 / html 脚本。 但这绝对是野蛮的。 您的字段应该有 ID，如果您有多个字段，则将事件绑定到 id 或使用类。 然后，您将该字段上的 onfocusout 事件检测为侦听器并相应地处理其内容。 如果您有一些自定义变量要求，那么您可以在输入字段中使用属性。

您的输入字段也有 [] 表示，还有更多这样的字段？ 但你有 id 价值.. 奇怪。 我认为要完全回答这个问题，您需要提供更多关于该脚本在哪里使用以及如何使用的上下文。

Javascript：

// NOTE: Numeric ids should be avoided imo.
const nine = document.querySelector('#nine')

// Detect onfocusout event on field #9
nine.onfocusout = (e) => {
    
    let
    
        // Get the value of the field:
        nine_value = nine.value,
        
        // Get the {id} attribute:
        nine_id = nine.getAttribute('data-id'),
        
        // Get the {u_key} value from somewhere??
        nine_ukey = nine.getAttribute('data-ukey')
    
    // Check if the value is empty:
    if (!nine_value) {
        document.getElementById("live_update").innerHTML="";
        document.getElementById("live_update").style.border="0px";
        document.getElementById("live_update").style.display="none";
        return;
    }
    
    // As it seams, that your error checking is done above only.. yes there should be more of it..
    // Then we can continue with the ajax call using fetch api:
    fetch('profiles.php?act=live_update&u_key=' + nine_ukey + '&id=' + id + '&q=' + nine_value).then(r => r.json().then(d => {
        
        // This is checking the backend readystate thingy:
        if (d.readyState == 4) {
            // The return payload comes as d variable. So if you send back JSON,
            // which is handled above, then your response text looks about like this: d.responseText
            document.getElementById("live_update").innerHTML=d.responseText;
            document.getElementById("live_update").style.class="bg-light";
            document.getElementById("live_update").style.display="block";
        }

    // Errors are however handled like this:
    })).catch(err => console.log('Error: ' + err))
}

HTML：

<!-- Numeric ids should be avoided, so we use #nine instead and you can put your {id} into an attribute.-->
<!-- Also since you didnt provide further context about the script, then I will be removing the [] from quantity. -->
<input type="text"  name="quantity" id="nine" data-id="{id}" data-ukey="{u_key}" value="{quantity}" class="sm-input-40"/>

我希望我没有错过任何东西，我相当盲目地编码。 查看Fetch API和自定义属性。