时间戳

首页 > 解决方案 > 根据从下拉列表中选择的选项渲染模板

javascript - 根据从下拉列表中选择的选项渲染模板

问题描述

我一直在尝试根据用户从下拉列表中选择的选项来呈现模板，但不幸的是对我不起作用。我的代码看起来像这样

const beer = {
  name: 'Belgian Wit',
  brewery: `Steam Whistle Brewery`,
  keywords: ['pale', 'cloudy', 'spiced', 'crisp'],
  texto: 'hello'
};


function renderKeywords(keywords) {
  return `
    <select multiple="true">
        ${keywords.map(keyword => `<option>${keyword}</option>`)}
    </select>
  `;
}

function renderHtml(texto) {
  return `
     <input type="text" id="${texto}" value=""/>
  `;
}

function selectElement(elem) {
  if (elem.value === 'multiple') {
    document.getElementById('p2').innerHTML = $ {
      renderKeywords(beer.keywords)
    };
  } else {
    document.getElementById('p2').innerHTML = $ {
      renderHtml(beer.texto)
    };
  }
}

const markup = `
  <div class="beer">
      <h2>${beer.name}</h2>
      <p class="brewery">${beer.brewery}</p>
      <select onchange="selectElement(this)">
         <option>Select</option>
         <option value="multiple">Multiple</option>
         <option value="single">Single</option>
      </select> 
      <div id="p2"></div>
  </div>
`;

document.getElementById('panel').innerHTML = markup;
<head>
  <title></title>
</head>

<body>
  <div id="panel"></div>
</body>

标签： javascript

解决方案

好像打错了，大佬 这些行$ {renderKeywords(beer.keywords) }并$ { renderHtml(beer.texto) }引发错误，因为您试图将${}模板文字中的 传递给innerHTML属性，但没有反引号。

虽然反引号和括号不是必需的，因为您renderKeywords()已经返回了一个字符串。

...
  if (elem.value === 'multiple') {
    document.getElementById('p2').innerHTML = $ {
      renderKeywords(beer.keywords)
    };
  } else {
    document.getElementById('p2').innerHTML = $ {
      renderHtml(beer.texto)
    };
  }
...


const beer = {
  name: 'Belgian Wit',
  brewery: `Steam Whistle Brewery`,
  keywords: ['pale', 'cloudy', 'spiced', 'crisp'],
  texto: 'hello'
};

function renderKeywords(keywords) {
  return `
    <select multiple="true">
        ${keywords.map(keyword => `<option>${keyword}</option>`)}
    </select>
  `;
}


function renderHtml(texto) {
  return `
     <input type="text" id="${texto}" value=""/>
  `;
}

function selectElement(elem) {
  if (elem.value === 'multiple') {
    document.getElementById('p2').innerHTML = renderKeywords(beer.keywords);
  } else {
    document.getElementById('p2').innerHTML = renderHtml(beer.texto);
  }
}

const markup = `
  <div class="beer">
      <h2>${beer.name}</h2>
      <p class="brewery">${beer.brewery}</p>
      <select onchange="selectElement(this)">
         <option>Select</option>
         <option value="multiple">Multiple</option>
         <option value="single">Single</option>
      </select> 
      <div id="p2"></div>
  </div>
`;

document.getElementById('panel').innerHTML = markup;
<head>
  <title></title>
</head>

<body>
  <div id="panel"></div>
</body>

推荐阅读