Html Change h1 content on javascript with list-CodePudding

Hello guys I have some mistake I want change h1 content on JavaScript with list but I cant where is my mistake can you help me?

<html> 
<body>
    <h2 id="demo">Example H</h2>
    <div > </div>
</body>
<script> 
next = document.querySelector("swiper-button-next");
name-index = 0;
name-list[
{
 name: 'John'
},
{
name: 'Christina'
}
];
next.addEventListener('click', myFunction)
function myFunction() {
  document.getElementById("demo").innerHTML /* (i was try like textContent) */ = "name-list[name-index].name";
}
<script>
<html>

CodePudding user response：

There are many syntax errors in your HTML/JS.

you cant use hyphens in variable names
HTML tags get opened but never closed
There is content after </body>
use let, const or var for variable declarations
the query selector was not right: use a "." infront of the CSS class name
Why is name_list[name_index].name in quatation marks? This will only insert the literal as String

 <html>
        <body>
            <h2 id="demo">Example H</h2>
            <div >My Button</div>
            <script> 
              let next = document.querySelector(".swiper-button-next");
              let name_index = 0;
              let name_list = [
                { name: 'John' },
                { name: 'Christina' }
              ];
              next.addEventListener('click', myFunction);
              function myFunction() {
                document.getElementById("demo").innerHTML = name_list[name_index].name;
              }
            </script>
        </body>
</html>

CodePudding user response：

Please check coding format

<html> 
<body>
    <h2 id="demo">Example H</h2>
    <div > </div>
</body>
<script> 
var next = document.querySelector(".swiper-button-next");
var name_index = 0;
var name_list = [
{
 name: 'John'
},
{
name: 'Christina'
}
];
function myFunction() {
  document.getElementById("demo").innerHTML /* (i was try like textContent) */ = name_list[name_index].name;
}
next.addEventListener('click', myFunction);

</script>
<html>

CodePudding user response：

Please try it. https://codepen.io/phm-tun-v/pen/wvyRqMe

<body>
    <h2 id="demo">Example H</h2>
    <button id="swiper-button-next">Click here</button>
</body>

<script> 
  next = document.getElementById("swiper-button-next");
  let nameIndex = 0;
  let nameList = [{ name: 'John'},{name: 'Christina'}];
  next.addEventListener('click', myFunction)
  function myFunction() {      
    document.getElementById("demo").innerHTML=nameList[nameIndex].name;
  }
</script>

CodePudding user response：

Thank you all so much I finally fixed my code

<html>            
<body>
...
                <h3  id="poetry-h">Sude</h3>
                <div ></div>
                <div ></div>
  <script>
            let prev = document.querySelector(".swiper-button-prev");
            let next = document.querySelector(".swiper-button-next");
            let poetry = document.querySelector("#poetry-h");
              let name_index = 0;
              let name_list = [
                { name: 'Sude' },
                { name: 'Bir Tohumdum Ben' }
              ];
              next.addEventListener('click', NextName);
              function myFunction() {
                poetry.innerHTML = name_list[name_index].name;
              }
              function NextName() {
                name_index  = 1;
                myFunction();
              }
              function PrevName() {
               if(name_index >= 1 ) {
                name_index -= 1;
               }
               else{
                name_index = 0;
               }
                myFunction();
              }
              prev.addEventListener('click', PrevName);
         </script>
</body>
</html>