Стили для скрытия содержимого, когда JS отключен

Question

У меня есть сайт, на котором обычно видны кнопки. Если JavaScript отключен, я хочу скрыть эту кнопку от пользователя. Я попытался использовать следующий код:

<noscript>
 <style>
   .cart-opt{display:none;}
 </style>
  <br>
 <div class="panel callout radius"> <h5>Please Enable Javascript</h5></div>
</noscript>
<div class="cart-opt opt-btns"> <!-- BUTTONS HERE SHOULD BE SHOWN WITH JS ENABLED--> </div>

Это не сработало. Хотя <style> тег был завернут в <noscript> тег он все еще читал и скрывал кнопки, даже когда JS включен.

Как мне написать стили, чтобы <style> тег не читается, если JS не отключен?

Примечание: я использую HTML 5.

Answer 1

Разве это не было бы альтернативным решением?

<noscript>
 <div class="panel callout radius"> <h5>Please Enable Javascript</h5></div>
 <div style="display:none">
</noscript>

<div class="cart-opt opt-btns"> <!-- BUTTONS HERE --> </div>

<noscript>
  </div>
</noscript>

Answer 2

Сделайте их изначально скрытыми по классу.

<style>.jscriptenabled{display:none;}</style>

Тогда, если JavaScript разрешен, они станут видимыми!

<script>
document.write('<style> .jscriptenabled{display:inherit;} </style>');
</script>`

Answer 3

Вы можете обернуть кнопку с <noscript> вместо этого вы можете сначала скрыть кнопку (с помощью CSS), а затем отобразить ее с помощью JavaScript. В этом случае без JavaScript кнопка не будет отображаться

Кроме того, оставьте уведомление заголовка (тот, который побуждает пользователя использовать JS) внутри <noscript>,