Question

我将变量从 Javascript 传输到 HTML ，以及将 Javascript 函数的结果存储为变量时遇到问题。这是我的代码，我将在下面解释：

在我的 HTML 文档中：

<hmtl>

<title> Japanese </title>

<head>
<script src="japanese.js" type="text/javascript"> </script>
<link rel="stylesheet" type="text/css" href="japanese.css">
</head>

<body>

<div class="title">
Japanese
</div>

<button onclick="process()">Random</button>
<br>
<div id="number"> </div>
<div id="english"> </div>

</body>

</html>

在我的 Javascript 文档中：

function random() {
    var integer = (Math.floor(Math.random() * (3)));
    document.getElementById('number').innerHTML = integer;
};

function searchE() {
    var English = englishID[integer];
    document.getElementById('english').innerHTML = English;
};

function process() {
    random();
    searchE();
};

var englishID [
    "add",
    "answer",
    "arrive"
];

我认为如何设置英文变量可能有问题，因为在我将searchE函数添加到代码之前，显示0到2之间的随机数。

感谢您的时间。

更新！将searchE函数更改为以下内容：

function searchE() {
    var integer = (Math.floor(Math.random() * (3)));
    var English = englishID[integer];
    document.getElementById('english').innerHTML = English;

但是，代码仍然不起作用：（

Answer 1

如果您想获取文档中的数字并在searchE中使用它，您必须再次选择该元素并提取其文本：

function searchE() {
  const integerFromDocument = Number(document.querySelector('#number').textContent);
  var English = englishID[integerFromDocument];
  document.getElementById('english').textContent = English;
}

当您故意插入/获取HTML标记时，仅使用innerHTML;否则，如果您只打算处理文本，textContent会更快，更安全，更可预测。

段：

＆＃13;

document.querySelector('button').addEventListener('click', process);
function random() {
    var integer = (Math.floor(Math.random() * (3)));
    document.getElementById('number').innerHTML = integer;
}

function searchE() {
  const integerFromDocument = Number(document.querySelector('#number').textContent);
  var English = englishID[integerFromDocument];
  document.getElementById('english').textContent = English;
}

function process() {
    random();
    searchE();
}

var englishID = [
    "add",
    "answer",
    "arrive"
];

＆＃13;

<div class="title">
Japanese
</div>
<button>Random</button>
<br>
<div id="number"> </div>
<div id="english"> </div>

＆＃13;

Answer 2

你有一些变量是在你被视为全局变量的函数内。你可以在函数外部的最顶部初始化整数。我建议虽然有两个函数分别返回整数和英语，然后调用正在处理的函数并在那里设置你的innerHTML。

Answer 3

将变量从函数传递给另一个函数的替代方法是返回fn1的结果并将该值传递给函数fn2：

例如：

function a () { 
   var integer = 1 + 4;
   // Some stuff with integer

   return integer;
}

function b (resultA){
    console.log(resultA);
}

b(a()); // Here the result of 'a' is passed to the function 'b'

＆＃13;

function random() {
  var integer = (Math.floor(Math.random() * (3)));
  document.getElementById('number').innerHTML = integer;
  
  return integer;
};

function searchE(integer) {
  var English = englishID[integer];
  document.getElementById('english').innerHTML = English; 
};

function process() {  
  searchE(random());
};

var englishID = [
  "add",
  "answer",
  "arrive"
];

＆＃13;

<div class="title">
  Japanese
</div>

<button onclick="process()">Random</button>
<br>
<div id="number"> </div>
<div id="english"> </div>

＆＃13;

Answer 4

你的代码实际上正在破碎。它不起作用，因为没有englishID的赋值运算符。

进行以下更改

从

var englishID [
  "add",
  "answer",
  "arrive"
];

到

var englishID = [
  "add",
  "answer",
  "arrive"
];

将变量从Javascript移动到HTML并保存变量，以便可以在其他函数中使用它们

4 个答案:

从

到