Question

当我复制/粘贴此代码时，尝试在同一HTML文件的另一个位置使用两个JavaScript代码都无法正常工作吗？为什么？ 如何在下面的代码中将js代码调用为另一种形式？

 <form name="randform">
    <input class="reload-but" type="button" value="↻ " onClick="randomString();">&nbsp;
        <div class="unnec">              
    <input class="random-but" type="button" name="randomfield" value="">
    </form>
    
    <script language="javascript" type="text/javascript">
    function randomString() {
    	var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";
    	var string_length = 8;
    	var randomstring = '';
    	for (var i=0; i<string_length; i++) {
    		var rnum = Math.floor(Math.random() * chars.length);
    		randomstring += chars.substring(rnum,rnum+1);
    	}
    	document.randform.randomfield.value = randomstring;
    }
    </script>
                        </div>

Answer 1

在同一HTML文件中的多个位置上放置此代码时，它不起作用的原因是，当您拥有一个名称为randform的表单时，它将返回该表单。但是由于您有多个具有相同名称randform的表单。 document.randform现在返回一个表单数组。

这是快速修复（可能不是推荐的方法）。

...
<input
  class="reload-but"
  type="button"
  value="↻ "
  onClick="randomString(this);"
>
...

function randomString(input) {
    var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";
    var string_length = 8;
    var randomstring = '';
    for (var i=0; i<string_length; i++) {
        var rnum = Math.floor(Math.random() * chars.length);
        randomstring += chars.substring(rnum,rnum+1);
    }

    // no longer rely on the form name.
    input.parentElement.randomfield.value = randomstring;
}

Answer 2

我对此没有任何问题。删除在这种情况下不必要的div关闭，并分开html和javascript，因为这通常是一种好习惯

function randomString() {
  var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";
  var string_length = 8;
  var randomstring = '';
  for (var i = 0; i < string_length; i++) {
    var rnum = Math.floor(Math.random() * chars.length);
    randomstring += chars.substring(rnum, rnum + 1);
  }
  document.randform.randomfield.value = randomstring;
}

<form name="randform">
  <input class="reload-but" type="button" value="↻ " onClick="randomString()">&nbsp;
  <div class="unnec">
    <input class="random-but" type="button" name="randomfield" value="">
</form>

Answer 3

我解决了自己，只是将HTML中的js function名称和form名称更改为另一个与我以前使用的名称不同的名称！

               <form name="randformm">
<input class="reload-but" type="button" value="↻ " onClick="randomStr();">&nbsp;
    <div class="unnec">              
<input class="random-but" type="button" name="randomfieldd" value="">
</form>

<script language="javascript" type="text/javascript">
function randomStr() {
    var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";
    var string_length = 8;
    var randomstring = '';
    for (var i=0; i<string_length; i++) {
        var rnum = Math.floor(Math.random() * chars.length);
        randomstring += chars.substring(rnum,rnum+1);
    }
    document.randformm.randomfieldd.value = randomstring;
}
</script>

为什么我不能在一个HTML文件中多次使用一个JavaScript代码？

3 个答案: