Click gets wrong result

J

jimandy

Joined
Jan 6, 2022
Messages
24
Reaction score
0
If you click either button it writes the same result. Want it to write the pet type of either depending on the button clicked.
Part of a bigger script that depends on the writing of the button element in the JS code.
Please help.

Code: 
<html><p>
<script>
function doit(name){
document.write('you clicked: '+ name);}

items = ["CAT", "DOG"];
    for(n=0;n<items.length;n++){

item=items[n];

document.write("<button onclick=\"doit(item)\" >PET</button>"+item+'<p>')
}
</script>
</html>
 
VBService

VBService

Joined
Jul 4, 2023
Messages
590
Reaction score
78
Check this ;)
HTML: 
<html>
  <style>
    .output {
      width: 90%;
      height: 50vh;
      overflow-y: auto;
    }
  </style>
  <script>
    function doit(name) {
      document.querySelector('.output').innerHTML += `<div>You clicked: ${name}</div>`;
    }

    items = ['CAT', 'DOG'];
    for (item of items) {
      document.body.innerHTML += `<p><button onclick="doit('${item}')">PET</button> ${item}</p>`;
    }
  </script>
 
  <div class="output"></div>
</html>
 
J

jimandy

Joined
Jan 6, 2022
Messages
24
Reaction score
0
VBService said:
Check this ;)
HTML: 
<html>
  <style>
    .output {
      width: 90%;
      height: 50vh;
      overflow-y: auto;
    }
  </style>
  <script>
    function doit(name) {
      document.querySelector('.output').innerHTML += `<div>You clicked: ${name}</div>`;
    }

    items = ['CAT', 'DOG'];
    for (item of items) {
      document.body.innerHTML += `<p><button onclick="doit('${item}')">PET</button> ${item}</p>`;
    }
  </script>
 
  <div class="output"></div>
</html>
Click to expand...
Thanks. Tried it. My editor says it gives this error:
JavaScript error: TypeError: null is not an object (evaluating 'document.body.innerHTML') on line 8
 
VBService

VBService

Joined
Jul 4, 2023
Messages
590
Reaction score
78
My oversight. I checked this code directly in my web browser and the browser automatically adds the <body> tag to my output code. Fixed version. ;)
HTML: 
<html>
  <head>
    <style>
      .output {
        width: 90%;
        height: 50vh;
        overflow-y: auto;
      }
    </style>
  </head>
 
  <body><!-- !!! -->
    <script>
      function doit(name) {
        document.querySelector('.output').innerHTML += `<div>You clicked: ${name}</div>`;
      }
      
      const items = ['CAT', 'DOG'];
      for (const item of items) {
        document.body.innerHTML += `<p><button onclick="doit('${item}')">PET</button> ${item}</p>`;
      }
    </script>
    
    <div class="output"></div>
  </body>
</html>


BTW, ;)
[ working code on-line ]
HTML: 
<html>
  <head>
    <style>
      .output {
        width: 90%;
        height: 50vh;
        overflow-y: auto;
      }
      button {
        margin: .25rem;
        cursor: pointer;
      }
    </style>
  </head>
 
  <body>
    <div class="output"></div>
   
    <script>
      function doit(name) {
        const output = document.querySelector('.output');
        output.innerHTML += `<div>You clicked: ${name}</div>`;
        output.scrollTop = output.scrollHeight; // Auto scroll down
      }
   
      const items = ['CAT', 'DOG', 'HAMSTER', 'PARROT', 'FISH', 'GUINEA PIG'];
      for (const item of items) {
        document.body.innerHTML += `<button onclick="doit('${item}')">PET ${item}</button>`;
      }
    </script>
  </body>
</html>
 
Last edited:
J

jimandy

Joined
Jan 6, 2022
Messages
24
Reaction score
0
VBService said:
My oversight. I checked this code directly in my web browser and the browser automatically adds the <body> tag to my output code. Fixed version. ;)
HTML: 
<html>
  <head>
    <style>
      .output {
        width: 90%;
        height: 50vh;
        overflow-y: auto;
      }
    </style>
  </head>
 
  <body><!-- !!! -->
    <script>
      function doit(name) {
        document.querySelector('.output').innerHTML += `<div>You clicked: ${name}</div>`;
      }
     
      const items = ['CAT', 'DOG'];
      for (const item of items) {
        document.body.innerHTML += `<p><button onclick="doit('${item}')">PET</button> ${item}</p>`;
      }
    </script>
   
    <div class="output"></div>
  </body>
</html>


BTW, ;)
[ working code on-line ]
HTML: 
<html>
  <head>
    <style>
      .output {
        width: 90%;
        height: 50vh;
        overflow-y: auto;
      }
      button {
        margin: .25rem;
        cursor: pointer;
      }
    </style>
  </head>
 
  <body>
    <div class="output"></div>
  
    <script>
      function doit(name) {
        const output = document.querySelector('.output');
        output.innerHTML += `<div>You clicked: ${name}</div>`;
        output.scrollTop = output.scrollHeight; // Auto scroll down
      }
  
      const items = ['CAT', 'DOG', 'HAMSTER', 'PARROT', 'FISH', 'GUINEA PIG'];
      for (const item of items) {
        document.body.innerHTML += `<button onclick="doit('${item}')">PET ${item}</button>`;
      }
    </script>
  </body>
</html>
Click to expand...
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Strange result using "for(in... " iteration 2
So Simple but doesn't work 3
Backticks and class elemnt comby not working 1
How do I output this recursive function correctly to a web browser? 2
Issue with textbox script? 0
Only one table shows up with the information 2
Google sheets song request 3
All CRUD operations work except POST. Why? 2

Members online

Total: 335 (members: 2, guests: 333)
Robots: 214

Forum statistics

Threads
474,262
Messages
2,571,043
Members
48,769
Latest member
Clifft

Latest Threads

Top