How to access an element created in another function in javascript?

Question

I have a main button the screen and when I click that button it creates two more buttons, then those two buttons should have their own functionality and click events as well. However, they are created within a function and dont have global variables or ids and I don't know how to access them. Anyone have any suggestions?

//html

<html>
    <head>
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <h1>Dataset Maker</h1>
        <button id="create-btn">+ Create Dataset</button>
        <script src="index.js"></script>
    </body>
</html>

//javascript

document.getElementById("create-btn").addEventListener("click",createDataset)


function createDataset(){
    var jsonBtn = document.createElement("Button")
    jsonBtn.setAttribute("id", "json-btn")
    jsonBtn.innerHTML = "JSON"
    document.body.appendChild(jsonBtn)
    
    var csvBtn = document.createElement("Button")
    csvBtn.innerHTML = "CSV"
    document.body.appendChild(csvBtn)
    
}

function jsonButton(){
    var browseJsonBtn = document.getElementById("json-btn")
    browseBtn.innerHTML = "Browse Files"
    document.body.appendChild(browseBtn)
    
}

function csvButton(){
    var browseCsvBtn = document.createElement("Button")
    browseCsvBtn.innerHTML = "Browse Files"
    document.body.appendChild(browseCsvBtn)
    
}

Where's the problem? Your question is a bit unclear. Under what circumstances do you need to get these elements? Your jsonButton function gets the existing "json-btn" element and then appends it, again, to the body. — Heretic Monkey
– Heretic Monkey, Commented Jul 7, 2021 at 15:30

Book Of Flames · Accepted Answer · 2021-07-07 15:23:39Z

1

Create all the three buttons in HTML (putting CSS is your choice)

You can just do display: none to the 2 buttons that are to be invisible and with the help of javascript you can set their display to initial. Add this event to the third button.

Example:

function displayButtons() {
  document.getElementById('jsonBtn').style.display = 'initial';
  document.getElementById('csvBtn').style.display = 'initial';
}

#jsonBtn,
#csvBtn {
  display: none;
}

<button id="createButton" onclick="displayButtons()">
Create Button
</button>
<button id="jsonBtn">
Js button
</button>
<button id="csvBtn">
CSV button
</button>

This is actually better than 'creating' the buttons yourself.

answered Jul 7, 2021 at 15:23

Book Of Flames

3363 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

kiran · Accepted Answer · 2021-07-07 15:59:51Z

<html>

<head>
  <link rel="stylesheet" href="index.css">
  <style>
  .jbtn, .csv-btn{
    background-color: crimson;
    color: white;
    padding: 5px;
    margin: 5px;

  }
  </style>
</head>

<body>
  <h1>Dataset Maker</h1>
  <button id="create-btn">+ Create Dataset</button>
  <script>
    document.getElementById("create-btn").addEventListener("click", createDataset)


    function createDataset() {
      var jsonBtn = document.createElement("Button")
      jsonBtn.setAttribute("id", "json-btn")
      jsonBtn.innerHTML = "JSON"
      jsonBtn.classList.add("jbtn")
      document.body.appendChild(jsonBtn)

      var csvBtn = document.createElement("Button")
      csvBtn.innerHTML = "CSV"
      csvBtn.classList.add("csv-btn")
      document.body.appendChild(csvBtn)

    }

    function jsonButton() {
      var browseJsonBtn = document.getElementById("json-btn");
      browseBtn.innerHTML = "Browse Files";
      document.body.appendChild(browseBtn);
    }

    function csvButton() {
      var browseCsvBtn = document.createElement("Button")
      browseCsvBtn.innerHTML = "Browse Files"
      document.body.appendChild(browseCsvBtn)

    }

  </script>

</body>

</html>

jsonBtn.classList.add("jbtn")

using this you can add a class after creating button, which can be used to access the element.

Lý Hoài · Accepted Answer · 2021-07-07 15:16:17Z

0

sorry, so long time i didn't work with pure javascript. i just suggest my code in jquery. If you change to jquery, all you js code will replace by code below:

$(document).on('click', '#create-btn', function(){
   var btn = $('<button class="json-btn">');
   btn.html('JSON');
   $('body').append(btn);

   btn = $('<button class="csv-btn">');
   btn.html('CSV');
   $('body').append(btn);
});

$(document).on('click', '.json-btn', function(){
   $(this).html('Browse Files'); // dont know exactly what you main here
});

$(document).on('click', '.csv-btn', function(){
   $(this).html('Browse Files'); // dont know exactly what you main here
});

answered Jul 7, 2021 at 15:16

Lý Hoài

1296 bronze badges

Collectives™ on Stack Overflow

How to access an element created in another function in javascript?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related