JavaScript - 在 HTML 标签中显示数组元素

Question

我有一个 javascript 页面 (function.js)，它包含在我的 game.php 中，在 functions.js 中定义了一个数组。像这样:

var palavra=[];
    function fun(){
        var input=document.getElementById("palavra").value;
        var letra1=input.charAt(0);
        var letra2=input.charAt(1);
        var letra3=input.charAt(2);
        var letra4=input.charAt(3);
        var letra5=input.charAt(4);
        letra1=palavra[0];
        letra2=palavra[1];
        letra3=palavra[2];
        letra4=palavra[3];
        letra5=palavra[4];
    }

该函数由game.php页面中的onclick事件触发:

<input id="palavra" type="text" name="palavra" maxlength="5">
        <button onclick="fun()" id="btn"> Enviar</button>

我希望数组的每个索引都显示在 html 标记的中间，如下所示(也在 game.php 中)

    <span class="letra"><script> palavra[0]</script></span>
    <span class="letra"><script> palavra[1]</script></span>
    <span class="letra"><script> palavra[2]</script></span>
    <span class="letra"><script> palavra[3]</script></span>
    <span class="letra"><script> palavra[4]</script></span>

但是，当我点击按钮时没有任何反应，并且出现以下错误:

Uncaught ReferenceError: palavra is not defined at game.php

Uncaught ReferenceError: fun is not defined at HTMLButtonElement.onclick (game.php)

我不明白为什么会这样，谁能告诉我问题出在哪里。

Answer 1

目前还不完全清楚您要做什么，但是，据我了解，您可以通过使用 for-in 循环来获取您的每个字符来实现您想要实现的目标输入。然后不是使用 HTML 输入每个字母，而是使用 javascript 通过执行 document.body.innerHTML 将每个字母/字符附加到您的文档。

请参阅下面的工作示例:

function fun() {
  var input = document.getElementById("palavra").value;

  for (i in input) {
    document.body.innerHTML += '<br /><span class="letra">' + input[i] + '</span>';
  }
}

<input id="palavra" type="text" name="palavra" maxlength="5" />
<button onclick="fun()" id="btn"> Enviar</button>

<!-- This will be generated using javascript-->
<!--span class="letra"><script> palavra[0]</script></span>
<span class="letra"><script> palavra[1]</script></span>
<span class="letra"><script> palavra[2]</script></span>
<span class="letra"><script> palavra[3]</script></span>
<span class="letra"><script> palavra[4]</script></span-->