Я добавил кнопку JavaScript, но не работает

Question

<p id="para1">Hi</p>
<button onclick="style()">Submit</button>

<script>
function style(){
  var text= document.getElementById("para1").style.color="green";
}
</script>

Я добавил HTML-код, используя JavaScript. Все заголовки и деления работают нормально, кроме кнопки. Кнопка не добавлена ​​или может не работать по некоторым причинам. Пожалуйста, проверьте мой код дать несколько предложений. Когда я использовал тот же код, что и HTML, он работал нормально.

Answer 1

Другой способ - добавить класс к элементу, который должен быть стилизован. Тогда вы очень гибки в его оформлении:

<p id="para1">Hi</p>
<button onclick="stylePara1()">Submit</button>

<style>
  .green-text {
    color: green
  }
</style>

<script>
  function stylePara1(){
    document.querySelector('#para1').classList.add('green-text');
  }
</script>

Или используйте встроенный синтаксис:

<p id="para1">Hi</p>
<button onclick="document.querySelector('#para1').classList.add('green-text')">Submit</button>

<style>
  .green-text {
    color: green
  }
</style>

Answer 2

style имеет особое значение в JavaScript, используйте другое имя в качестве имени вашей функции:

<p id="para1">Hi</p>
<button onclick="elementStyle()">Submit</button>

<script>
  function elementStyle(){
    document.getElementById("para1").style.color="green";
  }
</script>