让两个JavaScript在同一页面上工作

Question

I found a script along with some HTML that counts the amount of characters you type into a box: 我发现了一个脚本以及一些HTML，该脚本计算了您在框中键入的字符数：

<script type="text/javascript">
    function change (el) {
        var max_len = 50;

        if (el.value.length > max_len) {
            el.value = el.value.substr(0, max_len);
        }

        document.getElementById('char_cnt').innerHTML = el.value.length;
        document.getElementById('chars_left').innerHTML = max_len - el.value.length;

        return true;
    }
</script>`

<form>
    <textarea style="border: 1px solid #eb008b;" cols=100 rows=2 
onkeyup="change(this);"></textarea>
    <p>You've typed <span id="char_cnt">0</span> character(s)</p>
    <p>You are allowed <span id="chars_left">lots</span> more</p>
</form>

In this example, it counts up to 50 characters. 在此示例中，它最多计数50个字符。

I want to add a second form on the same page that counts up to 200 characters. 我想在同一页上添加第二个表单，该表单最多可包含200个字符。 When I duplicate the code it stops one script working. 当我复制代码时，它将停止一个脚本的工作。

How do I add it so both scripts work on the same page? 如何添加它，以便两个脚本都在同一页面上工作？

Answer 1

Why exactly are you setting up a second JS function? 您为什么还要设置第二个JS函数？ You could easily determine which form is getting worked in when you trigger them by id or name attribute. 通过id或name属性触发表单时，您可以轻松确定正在处理的表单。

Try something like this: 尝试这样的事情：

<!DOCTYPE html>
<html>
<body>

<script type="text/javascript">
  function change (el) {
    if (el.value.length > el.maxLength) {
      el.value = el.value.substr(0, el.maxLength);
    }
    document.getElementById(el.name + '_char_cnt').innerHTML = el.value.length;
    document.getElementById(el.name + '_chars_left').innerHTML = el.maxLength - el.value.length;
    return true;
  }
</script>

<form>
    <!-- Left Textarea -->
    <textarea name="left" style="border: 1px solid #eb008b;" cols=100 rows=2 maxLength=50 onkeyup="change(this);"></textarea>
    <p>You've typed <span id="left_char_cnt">0</span> character(s)</p>
    <p>You are allowed <span id="left_chars_left">lots</span> more</p>

    <!-- Right Textarea -->
    <textarea name="right" style="border: 1px solid #eb008b;" cols=100 rows=2 maxLength=200 onkeyup="change(this);"></textarea>
    <p>You've typed <span id="right_char_cnt">0</span> character(s)</p>
    <p>You are allowed <span id="right_chars_left">lots</span> more</p>
</form>

</body>
</html>

Answer 2

You are probably duplicating id attributes when you copy your form code. 复制表单代码时，您可能正在复制id属性。 document.getElementById() will only get the first instance of something with the id specified. document.getElementById()将仅获取具有指定ID的某物的第一个实例。

Try something like this instead: 尝试这样的事情：

 const MAX_LEN = 50; Array.from(document.querySelectorAll("form")).forEach(form => { const ta = form.querySelector("textarea"), cc = form.querySelector("span.char_count"), cl = form.querySelector("span.chars_left"); ta.addEventListener("keydown", () => { if (ta.value.length > MAX_LEN) { ta.value = ta.value.substr(0, MAX_LEN); } cc.innerHTML = ta.value.length; cl.innerHTML = MAX_LEN - ta.value.length; }); });

 <form> <textarea style="border: 1px solid #eb008b;" cols=100 rows=2></textarea> <p>You've typed <span class="char_count">0</span> character(s)</p> <p>You are allowed <span class="chars_left">lots</span> more</p> </form> <form> <textarea style="border: 1px solid #eb008b;" cols=100 rows=2></textarea> <p>You've typed <span class="char_count">0</span> character(s)</p> <p>You are allowed <span class="chars_left">lots</span> more</p> </form>

让两个JavaScript在同一页面上工作

问题描述

2 个解决方案

解决方案1
0 已采纳 2017-12-14 16:01:27

解决方案2
0 2017-12-14 16:10:07

让两个JavaScript在同一页面上工作

问题描述

2 个解决方案

解决方案1 0 已采纳 2017-12-14 16:01:27

解决方案2 0 2017-12-14 16:10:07

解决方案1
0 已采纳 2017-12-14 16:01:27

解决方案2
0 2017-12-14 16:10:07