0

I have this code:

let money = document.createElement('money')
money.style.color = 'green'
money.style.textAlign = 'center'
money.style.fontSize = '50px'
money.style.backgroundColor = 'blue'
money.textContent = 0
document.body.appendChild(money)

money.onclick = () => {
  money++
}

And when I click on money nothing happens. I want to increment the value shown in the textContent everytime I click on it. How to do it?

Spectric
  • 30,714
  • 6
  • 20
  • 43
Cataclysm88
  • 13
  • 1

1 Answers1

-1

You are trying to increment an HTML element.

You should be incrementing the textContent instead:

let money = document.createElement('money')
money.style.color = 'green'
money.style.textAlign = 'center'
money.style.fontSize = '50px'
money.style.backgroundColor = 'blue'
money.textContent = 0
document.body.appendChild(money)

money.onclick = () => {
  money.textContent++
}

Some other things:

  • money is not a valid HTML element. If you want to use custom elements, add the x- prefix.

  • You should use addEventListener('click', ...) instead of onclick

let money = document.createElement('x-money')
money.style.color = 'green'
money.style.textAlign = 'center'
money.style.fontSize = '50px'
money.style.backgroundColor = 'blue'
money.textContent = 0
document.body.appendChild(money)

money.addEventListener('click', () => {
  money.textContent++
})
Spectric
  • 30,714
  • 6
  • 20
  • 43
  • @isherwood The question is a duplicate many times over, there's no addressing of `onclick` vs `addEventListener`, or the fact that there is no `money` element in HTML. – Heretic Monkey Jul 06 '21 at 15:21
  • 2
    @HereticMonkey But that doesn't make this answer invalid or low in quality. – Charlie Jul 06 '21 at 15:23
  • 1
    @Charlie Hover over the up-/downvote buttons. It mentions usefulness. Not validity or quality. (Although those are not mutually exclusive.) – Ivar Jul 06 '21 at 15:25
  • @Charlie The downvote button's tooltip says, "This answer is not useful". I don't find answers to duplicates useful. I find answers which propagate the use of `on*` properties not useful. I find answers which do not counsel users on the use of invalid HTML to be not useful. – Heretic Monkey Jul 06 '21 at 15:27
  • 1
    I'm all for flagging dupes, but this one isn't apparent even to me, and sometimes I don't have time to spend looking. There's just as much value to the community in this answer as there is in a similar one on the duplicate question. Penalizing volunteers, especially those with lower rep, doesn't seem appropriate. [/meta] – isherwood Jul 06 '21 at 15:28
  • 1
    As far as the custom HTML element, I'm not well enough versed in that to know whether the code above has a practical application, so I didn't flag on that basis. – isherwood Jul 06 '21 at 15:29
  • 1
    @Ivar While a tooltip implicates the word "useful" , the voter should use it with discretion. It might not be useful to you - but it may be useful to the OP. It doesn't make sense to downvote a good answer just because it is not useful to a particular individual. – Charlie Jul 06 '21 at 15:31
  • 1
    @isherwood Words shouldn't be taken by their mere literal meaning. Just because a tooltip shows up the word 'useful", one should not disregard the accuracy or the help an answer would offer the OP. – Charlie Jul 06 '21 at 15:36
  • 1
    @Charlie Since the goal of Stack Overflow is, to be a repo of Q&A's that is useful to _future_ visitors, I don't count the OP when I vote (although this one isn't mine btw). I vote on whether I see a post having value in the grand scheme of things. The reason for closing questions as duplicate [is quite clear](https://stackoverflow.com/help/duplicates) and adding answers to obvious dupes (leaving this specific one aside), only spreads information more and comes across as a cheap rep-grab. Voting actually indicates to the OP that it is not appreciated. – Ivar Jul 06 '21 at 15:38
  • 1
    @Ivar You cannot exclude the OP factor when voting. The usefulness or the value of the answer is unalienably linked to what really the OP was trying to find out. In your logic, if an OP asks "What is X" and someone answeres "Y is a ball", you would upvote the answer - because the answer has a value of grand scale even though it doesn't help the OP at all. – Charlie Jul 06 '21 at 15:44
  • @Charlie I don't see what you can't exclude OP. SO isn't a helpdesk. Helping the OP is merely a nice side-effect in the construction of this repository. By closing the question, the OP already is lead to their answer in the dupe target. An additional answer doesn't add any value over that. And of course I would downvote "_Y is a ball_". It doesn't answer the question, so it doesn't have any value/isn't useful to future visitors of the question. – Ivar Jul 06 '21 at 15:50
  • 1
    @Ivar While "Y is ball" doesn't answer the question, it might give valuable and useful information which is "indirectly" relevant to OPs question. In that case the answer fits the hard rules you bring and deserves an upvote in your logic. OP is for humans. Humans can arrive at beter judgements than persuading the only meaning of a single word. In practicality, SO has many duplicate questions which doesn't provide the answer to the exact niche of the question. That is where the user need to think beyond a single word in a tooltip when evaluating the usefulness or qualituy. – Charlie Jul 06 '21 at 16:06
  • 1
    However, I believe it is the individual point of view one has on SO that plays a role when voting. Mine is certainly different than yours. Nice to have this chat with you. Cheers – Charlie Jul 06 '21 at 16:08