Javascript - setAttribute - onclick-CodePudding

I am newbie in js. I have a problem with one issue. I want to set use my function on my parahraph to set the attribiutes..

<body>
<p id=1>Paragraph 1</p>
<p id=2>Paragraph 2</p>
<p id=3>Paragraph 3</p>
</body>

<script>
function myFunction(id) {
    document.getElementById(id).style.color = "green";
}
initAll();
function initAll() {
    var elements = document.getElementsByTagName('p');
    var n;
    for (n = 0; n < elements.length;   n) {
        elements[n].setAttribute("onclick", "myFunction(%d)", n);
    }

}
</script>

In the output I have something like that:

I can't provide the references of variable n.

Maybe is there better way to set the attribiutes?

CodePudding user response：

From what I understand you want to attach an event listener( for click event ) on each p element and execute that function when clicking on the elements.

To attach an event listnener on an element you can use addEventListener.

To get the ID and pass it as a param to your function you can use getAttribute

You can also use const and let instead of var. Read here -> var vs let or here var let const

function myFunction(id) {

    document.getElementById(id).style.color = "green";
}

function initAll() {
    const elements = document.getElementsByTagName('p');

    for (let n = 0; n < elements.length;   n) {
        const elementId = elements[n].getAttribute("id")
        elements[n].addEventListener("click", function(){
            myFunction(elementId)
        });
    }
}
initAll()

<p id=1>Paragraph 1</p>
<p id=2>Paragraph 2</p>
<p id=3>Paragraph 3</p>

CodePudding user response：

1- HTML IDs can't start with a numbers.

<p id=myID1>Paragraph 1</p>

2- Concatenate the string with n

""   (n 1)   ""

3- Since the ID is a string, you have to close it inside single quotes

"myFunction('myID"   (n 1)   "')"

function myFunction(id) {
  document.getElementById(id).style.color = "green";
}

function initAll() {
  var elements = document.getElementsByTagName('p');
  var n;
  for (n = 0; n < elements.length;   n) {
    elements[n].setAttribute("onclick", "myFunction('myID"   (n 1)   "')");
  }
}

initAll();

<body>
  <p id=myID1>Paragraph 1</p>
  <p id=myID2>Paragraph 2</p>
  <p id=myID3>Paragraph 3</p>
</body>

CodePudding user response：

You're trying to set the onclick attribute to your paragraph elements and assign them to your myFunction.

Since your ids start from 1, you've to write (n 1) inside the body of for loop (loop variable n starts from 0)

In Javascript, there are no formatting specifiers (%d) available like in C. So you just do string concatenation using the operator.

So, the line should be,

for (var n = 0; n < elements.length;   n) {
   var index = n   1;
   elements[n].setAttribute("onclick", "myFunction("   index   ")");
}

It'll work fine now.

But this is not a way people use to add event listeners in JavaScript. I recommend checking out forEach and addEventListener methods in MDN.

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach