为什么从函数调用分配给属性 innerHTML 不起作用？答案

【问题标题】：why asignment to property innerHTML from a function call doesnt work?为什么从函数调用分配给属性 innerHTML 不起作用？
【发布时间】：2020-08-10 05:57:29
【问题描述】：

我需要你的帮助。我想调用一个函数并将结果分配给一个元素的内部 html，但它不起作用。下面是代码：

function abc() {
  var a = document.getElementById("take").value;

  function Ram() {
    document.write("your name is : Ram <br>");
    document.write("your vill/post : Sunsyari <br>");
    document.write("your block is : Betalghat <br>");
    document.write("your Total land is: 5 bega <br>");
  }

  if (a == "Ram" || a == "ram") {
    document.getElementById("show").innerHTML = Ram();
  } else {
    document.getElementById("show").innerHTML = "wrong credential";
  }
}

请帮忙怎么办？

【问题讨论】：

你应该给.innerHTML分配一个字符串。但是你的Ram 函数返回undefined，所以这是行不通的。需要return "your name is...";
另外，avoid document.write!
尽量避免使用 document.write。几乎没有充分的理由在网页中使用它。您已经将值分配给 innerHTML，因此只需从 Ram() 返回一个字符串。

标签： javascript function dom-events innerhtml

【解决方案1】：

InnerHTML 属性接受一个字符串，但在您的情况下，您实际上并没有从 Ram 函数返回任何内容。试试下面的 sn -p

function abc() {
  var a = document.getElementById("take").value;

  function Ram() {
    return `your name is : Ram <br>
    your vill/post : Sunsyari <br>
    your block is : Betalghat <br>
    your Total land is: 5 bega <br>`
  }
  if (a.toLowerCase()=="ram") {
    document.getElementById("show").innerHTML = Ram();
  } else {
    document.getElementById("show").innerHTML = "wrong credential";
  }
}
abc()

#take{
background:yellow;
}

<input value="ram" id="take">
<div id="show"><div>

【讨论】：