Question

我在名为modal.html的文件中创建一个模态，并且填充模式的内容来自外部JS文件。内容是由以下函数在名为one.js的JS文件中返回的字符串：

function current()
{
  if(selection === 0 && yesResources[questionsCounter] != null)
  {
    return yesResources[questionsCounter];
  }
  else if(selection === 1 && noResources[questionsCounter] != null)
  {
  return noResources[questionsCounter];
  }
  else
  {
    return 'You are on the right track!';
  }
}

为模态编写的HTML代码如下：

<!-- The Modal -->
<div id="myModal" class="modal">

    <!-- Modal content -->
    <div class="modal-content">
        <div class="modal-header">
           <span class="close">&times;</span>
           <h2>Resources</h2>
        </div>
    <div class="modal-body">
        <p>Test</p>
        <p id='modalContent'></p>
    </div>
    <div class="modal-footer">
        <h3>Living Progress</h3>
    </div>
  </div>
</div>

我想调用current（）函数来填充id为'modalContent'的段落空间。我已经尝试过使用document.getElementById（“modalContent”）。innerHTML = current（），document.getElementById（“modalContent”）。textContent = current（），调用段落标签之间的函数等等。还有其他建议吗？感谢。

Answer 1

键入document.getElementById（）时忘记了id名称，我建议你使用document.querySelector（'＃modalContent'），因为这样它也可以应用于选择classname或tagname。

Answer 2

您应该使用document.getElementById("modalContent").textContent = current();代替document.getElementById.textContent = current()（忘记在id之后指出getElementById。

Answer 3

您应该使用：

document.getElementById("modalContent").innerHTML = "Your content here";

这将解决您的问题。

Answer 4

我检查了你的javascript代码，风格不好，条件太长。我修改了以下代码。

＆＃13;

var e = function(sel) {
    return document.querySelector(sel)
}

function current() {
    var yR = yesResources[questionsCounter]
    var nR = noResources[questionsCounter]

    if (selection === 0 && yR != null) {
        return yR;
    } else if (selection === 1 && nR != null) {
        return nR
    } else {
        return 'You are on the right track!'
    }
}

e('#modalContent').innerHTML = '<h1>hi is here</h1>'

＆＃13;

改变内容的模式

4 个答案: