0

I am new to javascript and I am having trouble changing the value of an html element. Here is the HTML element:

<input type="button" id="button1" onclick="click('button1')"/>

Here is my javascript function 

function click(){
    document.getElementById("button1").value = "X";
  }

I would be grateful for any help.

DBL
  • 45
  • 1
  • 1
  • 5
  • 1
    Please [edit] your question and include any errors seen in the console. – Sebastian Simon Nov 29 '15 at 12:29
  • 1
    @Blauhirn Because the question isn’t easily answerable as it lacks a [Minimal, Complete, and Verifiable example](http://stackoverflow.com/help/mcve) and a specific problem statement. – Sebastian Simon Nov 29 '15 at 12:49
  • @Xufox it's not my question, but thanks. 2 downvotes because you can't just paste&copy OP's code sample? Why would that be necessary, not to speak of that the "problem" will be easily detectable anyway? (3 lines of code) – phil294 Nov 29 '15 at 12:52
  • but I see, a proper error statement is missing. would it have beeen enough if DBL had said "nothing happens"? – phil294 Nov 29 '15 at 12:53
  • @Blauhirn No, the code can’t be simply copied, as JS and HTML heavily depend on nesting, order and several other details. A specific problem statement is complete if it contains the desired behavior and a specific description of what didn’t work. In this case the problem was the redeclaration of `window.click` where DBL shouldn’t have used the name `click` for his function or used `addEventListener` instead of inline handlers. However, if there was an additional problem with code order, DBL would simply say that that didn’t work and no one knew why. – Sebastian Simon Nov 29 '15 at 13:05
  • 1
    @Xufox — `window.click` hasn't been redeclared, the problem is that `document.getElementById("button1").click` masked it. The code (in *any* order) executes without any errors at all. The cause of the problem only begins to reveal itself if you use `console.log(click)` inside the `onclick` function or run a debugger there. There is very little that could be done to make the question better. Describing the approaches used to debug it might have helped, but it's clearly a beginner's question so familiarity with such techniques (especially the advanced ones needed *here*) shouldn't be expected – Quentin Nov 29 '15 at 13:10
  • @Quentin I meant redefinition. At least that’s what JSHint _sometimes_ says when trying to declare variables with a name that already is a property of `window` (e.g. `name`, `status`, `length`, etc.). While it’s correct that that code doesn’t depend on order, it still depends on function-nesting. – Sebastian Simon Nov 29 '15 at 13:16
  • @Xufox — That is not what it happening, and it does not depend on function nesting. See the accepted answer on the duplicate question which explains with screenshots. – Quentin Nov 29 '15 at 17:01

1 Answers1

0

The function click() exists in the narrower scope so that is what getting called here. See these MDN docs.

Rename it to something else and your code will work.

function clickButton1(val){
  console.log('val = ' + val);
  document.getElementById('button1').value = "X";
}
<input type="button" id="button1" onclick="clickButton1('button1 ')" />
Rahul Desai
  • 15,242
  • 19
  • 83
  • 138
  • `click` is not a reserved keyword. If it was, there would have been an errorat the line which attempted to declare the function. It just already exists in a narrower scope. See the duplicate question. – Quentin Nov 29 '15 at 12:54