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

Question

我发现了一个脚本以及一些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>

在此示例中，它最多计数50个字符。

我想在同一页上添加第二个表单，该表单最多可包含200个字符。 当我复制代码时，它将停止一个脚本的工作。

如何添加它，以便两个脚本都在同一页面上工作？

Answer 1

您为什么还要设置第二个JS函数？ 通过id或name属性触发表单时，您可以轻松确定正在处理的表单。

尝试这样的事情：

<!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

复制表单代码时，您可能正在复制id属性。 document.getElementById()将仅获取具有指定ID的某物的第一个实例。

尝试这样的事情：

 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