Почему я не могу использовать один код javascript много раз в одном Html-файле?

#javascript #html

#javascript #HTML

Вопрос:

Когда я копирую / вставляю этот код, пытаясь использовать в другом месте тот же Html-файл, оба кода javascript перестают работать? Почему? Как я вызываю js-код в другой форме в моем коде ниже??

  <form name="randform">
    <input class="reload-but" type="button" value="↻ " onClick="randomString();">amp;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>

Ответ №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;
}

Ответ №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()">amp;nbsp;
  <div class="unnec">
    <input class="random-but" type="button" name="randomfield" value="">
</form>

1. 1. Не имеет значения, отдельный файл js или нет, когда вы подключаете файл js к Html. 2. Код работает хорошо, если вы используете 1 раз, попробуйте использовать 2-3 раза, это не сработает!

2. Если вы запустите фрагмент, он, похоже, сработает, не так ли?

Ответ №3:

Я решил сам, просто изменил function имя js и form name в Html на другое, не такое, как раньше, которое я использовал!

                <form name="randformm">
<input class="reload-but" type="button" value="↻ " onClick="randomStr();">amp;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>