JavaScript Issue can not use function with HTML Tag

Question

I have created a JavaScript exercise that changes the ID of an HTML object.

I want to set up a button that will cycle between choices. Right now the button is not executing the function.

Please take a look at the code and let me know what I am doing wrong.

a = 0;
n = 1;
i = 0;

function changexc(a, n) {
  document.getElementById('effect00').id = "effect00" + (a + i);
}

function counterxc() {
  i = n++;
  return n;
}


document.write("<br>" + "a is " + a + "<br>");

document.write(" i is " + i + "<br>");

document.write(" n is " + n + "<br>");

document.write(" n + a is " + (n + a) + "<br>");



changexc(a);

<style>#effect001 {
  max-width: 100px!important;
  height: 200px;
  background-color: red;
  display: block;
}

#effect002 {
  max-width: 200px!important;
  height: 100px;
  background-color: blue;
  display: block;
}

#effect003 {
  max-width: 300px!important;
  height: 300px;
  border-radius: 50%;
  background-color: yellow;
  display: block;
}

</style>

<div id="effect00"></div>

<button type="button" id="thatdarnbutton" onclick="counterxc ()">Click Me</button>

Does it throw any errors? And where have you included the javascript? In the head or above the end of the body? — Oliver F.
– Oliver F., Commented Apr 25, 2017 at 21:38
I think you should call changexc function instead of returning n in a onclick function. — nocodename
– nocodename, Commented Apr 25, 2017 at 21:40
From what I see, your counterxc only sets a variable to some value...that's about it — Lixus
– Lixus, Commented Apr 25, 2017 at 21:47
Alex, I think you should start learning JavaScript from the basics. Your code has too many mistakes... you don't use var, you don't use functions correctly... I think it's better to start from an easier exercise. — GramThanos
– GramThanos, Commented Apr 25, 2017 at 21:53

Digvijay · Accepted Answer · 2017-04-26 07:44:58Z

1

This code works - see explanation below

var a = 0;
var n = 1;
var i = 0;

function changexc() {
  console.log(" added class : " + "effect00" + (a + i));
  document.getElementById("effect00").className = "effect00" + (a + i);

  console.log("<br>" + "a is " + a + "<br>");

  console.log(" i is " + i + "<br>");

  console.log(" n is " + n + "<br>");

  console.log(" n + a is " + (n + a) + "<br>");




}

function counterxc() {
  i = n + 1;
  n++;
  
  if(n >3) {
    n = 0;
  }
  
  changexc();
}




changexc();

.effect001 {
  max-width: 100px!important;
  height: 200px;
  background-color: red;
  display: block;
}

.effect002 {
  max-width: 200px!important;
  height: 100px;
  background-color: blue;
  display: block;
}

.effect003 {
  max-width: 300px!important;
  height: 200px;
  border-radius: 50%;
  background-color: yellow;
  display: block;
}

<div id="effect00">

  hello world!

</div>

<button type="button" onClick="counterxc();">Click Me</button>

Its just "use strict"; javascript environment (node, browser etc) would assume/say that you can't use variables before you declare them and I suggest you do that. Its good practise:

However, as other have commented - start from basics, learn how browser uses javascript as well other environments such as node. I am still getting used to the new ES6 and ES7 syntax and all the new build systems. Its a whole lot to mention here but i would recommend the "You don't know JS" series of books

edited Apr 26, 2017 at 7:44

answered Apr 25, 2017 at 21:45

Digvijay

7845 silver badges10 bronze badges

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

2 Comments

Alex Elliot Over a year ago

I'm not quite sure what you mean? I will be happy to look at anything that you recommend. However I am still not sure why the counter code isn't working when I click on the button. I'm not getting any errors in my console when I test it out. However I do not see the variable value for I or N change. I also do not see the right color or shape appear.

Digvijay Over a year ago

Hi Alex, debugging javascript is not that hard if you know what are you trying to achieve. in this case you need to call the changexc function eventually to update value of n and apply the changes to the element "effect00". See the updated code above!

Talent Runners · Accepted Answer · 2017-04-26 06:58:03Z

0

You code work fine, but need a little work. First of you have to make sure that all element been loaded before you begin your work use setTimeout. See down i have fixed your problem here and this should now work

a = 0;
n = 1;
i = 0;
var id = "effect00";

function changexc(a, n) {
  document.getElementById(id).setAttribute("id", "effect00" + (a + i));
  id = "effect00" + (a + i);
}

function counterxc() {
  i = n++;
  write();
  return n;
}

function write() {
  var resultDiv = document.getElementById(id);
  var resultstring = "<br>" + "a is " + a + "<br>"
  resultstring += " i is " + i + "<br>"
  resultstring += " n is " + n + "<br>"
  resultstring += " n + a is " + (n + a) + "<br>"
  resultstring += "id is  " + "effect00" + (a + i);
  resultDiv.innerHTML = resultstring;
  changexc(a)
}

setTimeout(function() { /// this is importent, wait untill elemtns have loaded

  changexc(a);
  write();

}, 100);

#effect001 {
  max-width: 100px!important;
  height: 200px;
  background-color: red;
  display: block;
}

#effect002 {
  max-width: 200px!important;
  height: 100px;
  background-color: blue;
  display: block;
}

#effect003 {
  max-width: 300px!important;
  height: 300px;
  border-radius: 50%;
  background-color: yellow;
  display: block;
}

<button type="button" id="thatdarnbutton" onclick="counterxc()">Click Me</button>

<div id="effect00"></div>

edited Apr 26, 2017 at 6:58

Talent Runners

4195 silver badges21 bronze badges

answered Apr 25, 2017 at 22:17

Alen.Toma

4,8782 gold badges19 silver badges37 bronze badges

2 Comments

Alex Elliot Over a year ago

I like your answer, Everything is working. However I don't understand a couple of things. Why do you need to "id" in the write function. Also is changexc is called in write aren't we just calling it twice at the end.

Alen.Toma Over a year ago

the id is needed so i could write the result to the div, and because the id of the div changes i need to know what it has changed to. When counterxc is triggered we would need to know what have been changed so we fire the write method. and when the write fires its says ok now we have changed the values of the n and i so new id have been generated so set the variable id to the new id by firing changexc

Collectives™ on Stack Overflow

JavaScript Issue can not use function with HTML Tag

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related