使用 javascript 在模态中动态填充 html 模板内容答案

【问题标题】：Populate html template content inside modal dynamically using javascript使用 javascript 在模态中动态填充 html 模板内容
【发布时间】：2018-07-23 00:41:37
【问题描述】：

我正在尝试使用 javascript 动态填充 html 模板

这是我正在使用的

window.onload = function() {
    document.getElementById('price_01').innerHTML = price_01;
    document.getElementById('dimension_01').innerHTML = dimension_01;
}

在标签内定义全局变量

var price_01 = '$8000';
var dimension_01 = '10m';

如果标签像这样独立，则此工作：

<div class="w3-container">
  <table class="table">
      <tbody>
        <tr>
          <td>Price:</td>
          <td id='price_01'></td>
        </tr>
        <tr>
          <td>Dimension:</td>
          <td id='dimension_01'></td>
        </tr>
      </tbody>
  </table>
</div>

但是，当我尝试在模式中填充内容时，它不起作用：

<div class="w3-container">
  <button onclick="document.getElementById('id02').style.display='block';" class="w3-button w3-black">More Details</button>
  <div id="id02" class="w3-modal">
    <div class="w3-container">
      <table class="table">
          <tbody>
            <tr>
              <td>Price:</td>
              <td id='price_01'></td>
            </tr>
            <tr>
              <td>Dimension:</td>
              <td id='dimension_01'></td>
            </tr>
          </tbody>
      </table>
    </div>
  </div>
</div>

这将返回空白。有没有办法解决这个问题？有没有比我正在做的更优雅的解决方案？谢谢

编辑：抱歉，它不是在模态内部不起作用，而是在模态内部和外部都使用它时不起作用。这是 TryIt Editor 上的复制：

https://www.w3schools.com/code/tryit.asp?filename=FTJIGZ6U0XCK

【问题讨论】：

旧的#price_01 还在吗？
是的，但不是内部模态。模态之外的内容工作得很好
这是 tryit 编辑器中的复制：w3schools.com/code/tryit.asp?filename=FTJIGZ6U0XCK。弄清楚如何复制错误

标签： javascript html twitter-bootstrap modal-dialog

【解决方案1】：

您有两个元素，每个元素分别是 id 和 price_01 和 dimension_01。您只能拥有一个具有特定id 的元素。您应该改为按类名选择这些元素。

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <script type="text/javascript">
    var price_01 = '$8000';
    var dimension_01 = '10m';
    var prices = document.getElementsByClassName("price_01");
    var dimensions = document.getElementsByClassName("dimension_01");
    window.onload = function() {
    for(let i = 0; i < prices.length; i++){
     prices[i].innerHTML = price_01;
    }
    for(let i = 0; i < dimensions.length; i++){
     dimensions[i].innerHTML = dimension_01;
    }
	}
  </script>
<body>

<div class="w3-container">
  <h2>W3.CSS Modal</h2>
  <div class="w3-container">
    <table class="table">
        <tbody>
          <tr>
            <td>Price:</td>
            <td class='price_01'></td>
          </tr>
          <tr>
            <td>Dimension:</td>
            <td class='dimension_01'></td>
          </tr>
        </tbody>
    </table>
  </div>
  <button onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Open Modal</button>
  <div id="id01" class="w3-modal">
    <div class="w3-modal-content">
      <div class="w3-container">
        <span onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">&times;</span>
        <div class="w3-container">
          <table class="table">
              <tbody>
                <tr>
                  <td>Price:</td>
                  <td class='price_01'></td>
                </tr>
                <tr>
                  <td>Dimension:</td>
                  <td class='dimension_01'></td>
                </tr>
              </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
            
</body>
</html>

【讨论】：