getAttribute() returns null in Javascript/HTML-CodePudding

I have buttons in HTML and I want to put sort of condition on them that whichever button is clicked i.e (if id of button is equal to 1) then it displays the CSV I have specified otherwise display a different CSV. I actually have 50 CSVS which I want to display but the getAttribute is returning null can anyone explain why? I'm a beginner at Javascript so haven't been able to find any solution yet.

Some snaps of the code:

cotton.html

report which gets displayed through reports.html i.e submission2.csv

var link = document.querySelector('button');
console.log(link);
var target = link.getAttribute("id");
console.log(target);
pos = 1;

function catchit(no) {
  if (no == 1) {
    path = "/static/data/submission1.csv"
    console.log(path);
  } else if (no == 2) {
    path = "/static/data/submission2.csv"
    console.log(path);
  } else {
    path = "/static/data/submission2.csv"

  }

}


function parseData(createGraph) {
  if (target == 1) {
    catchit(1)
  } else {
    catchit(2)
  }

  Papa.parse(path, {
    download: true,
    complete: function(results) {
      createGraph(results.data);

    }
  });
}


function createGraph(data) {
  var years = ['x'];
  var CottonYarn1 = ["Cotton Yuan/MT"];

  for (var i = 1; i < data.length; i  ) {

    if (data[i][0] === undefined) {
      years.push(null);
    } else {
      years.push(data[i][0]);
    }
    if (data[i][1] === undefined) {
      CottonYarn1.push(null);
    } else {
      CottonYarn1.push(data[i][1]);
    }
    console.log(years);
    console.log(CottonYarn1);

  }
  parseData(createGraph);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.2/papaparse.min.js" ></script>

<div >

  <a  href={% url 'reports' %}> <button   id="1"onclick="catchit(this)" >Formget Online Form Builder Create Online Forms</button></a>    
  <a  href={% url 'reports' %}> <button   id="2" onclick="catchit(this)" >Formget Online Form Builder Create Online Forms</button></a>
  <a  href={% url 'reports' %}> <button   id="3" onclick="catchit(this)" >Formget Online Form Builder Create Online Forms</button></a>

</div>

reports.html

{% extends "base.html" %}
  {% load static %}

   {% block main-content %}

   <link rel="stylesheet" href="{% static 'stylesheets/style.css'%}">


  <div >
     <!doctype html>
       <html lang="en">
        <body>
     {% load static %}
      <link rel='stylesheet' 
       href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.css" 
        />

  <!-- Load c3.css -->
  <link rel="stylesheet" href="{% static 'stylesheets/c3.css' %}" 
  type="text/css">
  
  <script src="{% static 'javascripts/allpredicted.js' %}"</script>
  </body>
  </div>
  </html>

CodePudding user response：

you have typo in your code, it should be like this:

function catchit(id){
console.log(id);
}

<button   id="1"onclick="catchit(this.id)" >Formget Online Form Builder Create Online Forms</button></a>    
<button   id="2" onclick="catchit(this.id)" >Formget Online Form Builder Create Online Forms</button>
 <button   id="3" onclick="catchit(this.id)" >Formget Online Form Builder Create Online Forms</button>

CodePudding user response：

Seems like ID cannot be an attribute. You can rename your attribute by any other name but id. try make it id1 or button-id and try.

var link = document.querySelector('button');
console.log(link);
var target = link.getAttribute("id1");
console.log(target);
pos = 1;

function catchit(no) {
  if (no == 1) {
    path = "/static/data/submission1.csv"
    console.log(path);
  } else if (no == 2) {
    path = "/static/data/submission2.csv"
    console.log(path);
  } else {
    path = "/static/data/submission2.csv"
console.log(path);
  }

}


function parseData(createGraph) {
  if (target == 1) {
    catchit(1)
  } else {
    catchit(2)
  }

  Papa.parse(path, {
    download: true,
    complete: function(results) {
      createGraph(results.data);

    }
  });
}


function createGraph(data) {
  var years = ['x'];
  var CottonYarn1 = ["Cotton Yuan/MT"];

  for (var i = 1; i < data.length; i  ) {

    if (data[i][0] === undefined) {
      years.push(null);
    } else {
      years.push(data[i][0]);
    }
    if (data[i][1] === undefined) {
      CottonYarn1.push(null);
    } else {
      CottonYarn1.push(data[i][1]);
    }
    console.log(years);
    console.log(CottonYarn1);

  }
  parseData(createGraph);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.2/papaparse.min.js" ></script>

<div >

  <a  href={% url 'reports' %}> <button   id1="1"onclick="catchit(this)" >Formget Online Form Builder Create Online Forms</button></a>    
  <a  href={% url 'reports' %}> <button   id1="2" onclick="catchit(this)" >Formget Online Form Builder Create Online Forms</button></a>
  <a  href={% url 'reports' %}> <button   id1="3" onclick="catchit(this)" >Formget Online Form Builder Create Online Forms</button></a>

</div>

Worked fine with me.