the following 'read more' text expand '+/-' button script is functioning in Chrome but not IE. I can see some threads saying let should now work in IE11. Can anyone help me correct this script to function in both browsers?
Thanks in advance!
<table>
<tr>
<td class="definition" data-keyword="dog">
<button onclick="expandMore('dog')" class="myBtn">+</button><strong>Definition of a dog</strong> a domesticated carnivorous mammal that typically has
<span class="threeDots"> ... </span>
<span class="hiddenText" style="display: none;"><br>a long snout, an acute sense of smell, non-retractable claws, and a barking, howling, or whining voice.</span>
</td>
<td>8 (3)(d)</td>
</tr>
</table>
<script>
function expandMore(keyword) {
let threeDots = document.querySelector(`.definition[data-keyword="${keyword}"] .threeDots`);
let hiddenText = document.querySelector(`.definition[data-keyword="${keyword}"] .hiddenText`);
let btnText = document.querySelector(`.definition[data-keyword="${keyword}"] .myBtn`);
if (threeDots.style.display === "none") {
threeDots.style.display = "inline";
btnText.textContent = "+";
hiddenText.style.display = "none";
} else {
threeDots.style.display = "none";
btnText.textContent = "-";
hiddenText.style.display = "inline";
}
}
</script>
I think template literal is not yet supported by IE. If you look at the: https://kangax.github.io/compat-table/es6/
Change it to
let threeDots = document.querySelector('.definition[data-keyword="' + keyword + '"] .threeDots');
Or transpile it using Babel https://babeljs.io/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.