Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #33116 > unrolled thread

How to make the button disappear upon click?

Back to article view | Back to comp.lang.javascript

Contents

  How to make the button disappear upon click? justaguy <lichunshen84@gmail.com> - 2017-04-25 08:54 -0700
    Re: How to make the button disappear upon click? "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2017-04-25 22:05 +0200
      Re: How to make the button disappear upon click? justaguy <lichunshen84@gmail.com> - 2017-04-27 17:56 -0700
    Re: How to make the button disappear upon click? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2017-04-26 03:33 +0200
      Re: How to make the button disappear upon click? "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2017-04-26 10:45 +0200

#33116 — How to make the button disappear upon click?

Hi,

I have an INPUT box of type "button" to trigger an event, a function call inside a SPAN element and this SPAN element is dynamically generated.  I'd like to have this "button" to disappear upon click.  Is it doable? If so, how?  Thanks.


var newrow = document.createElement("tr");
newrow.id = 'rowX';

var id = 5;

// cell 0
var cell = document.createElement("td");
var cellText = document.createElement('span');
cellText.innerHTML = 'Add <strong>Assignment</strong> <input type="button" id=this value="+" onclick=addSomething();document.getElementById(this).style.display="none";>';
cell.appendChild(cellText);
newrow.appendChild(cell);

or
cellText.innerHTML = 'Add <strong>Assignment</strong> <input type="button" id=id value="+" onclick=addSomething();document.getElementById(id).style.display="none";>';
			
	

[toc] | [next] | [standalone]

#33118

ram@zedat.fu-berlin.de (Stefan Ram) wrote on 25 Apr 2017 in 
comp.lang.javascript:

> justaguy <lichunshen84@gmail.com> writes:
>>onclick=addSomething();document.getElementById(id).style.display="none"
> 
>   What seems to be the intended attribute value for the
>   »onclick« attribute is
> 
> addSomething();document.getElementById(id).style.display="none"
> 
>   . It contains a quote character and therefore should be
>   quoted itself (see »§ 1.9. A quick introduction to HTML«
>   in »HTML 5.2 Editor's Draft, 29 December 2016«).
> 
>   (There might be other errors in this code, but I would like
>   to restrict my report to one error only.)

When you make a separate function, 
all the problems with quotes disapear:

... = '<input onclick=myFunction(this)>';

function myFunction(t) {
   addSomething();
   t.parentNode.style.display='none';
};


-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#33124

On Tuesday, April 25, 2017 at 4:06:00 PM UTC-4, Evertjan. wrote:
> Evertjan wrote on 25 Apr 2017 in 
> comp.lang.javascript:
> 
> > justaguy writes:
> >>onclick=addSomething();document.getElementById(id).style.display="none"
> > 
> >   What seems to be the intended attribute value for the
> >   »onclick« attribute is
> > 
> > addSomething();document.getElementById(id).style.display="none"
> > 
> >   . It contains a quote character and therefore should be
> >   quoted itself (see »§ 1.9. A quick introduction to HTML«
> >   in »HTML 5.2 Editor's Draft, 29 December 2016«).
> > 
> >   (There might be other errors in this code, but I would like
> >   to restrict my report to one error only.)
> 
> When you make a separate function, 
> all the problems with quotes disapear:
> 
> ... = '<input onclick=myFunction(this)>';
> 
> function myFunction(t) {
>    addSomething();
>    t.parentNode.style.display='none';
> };
> 
> 

Awesome.  Thank you.

[toc] | [prev] | [next] | [standalone]

#33121

Stefan Ram wrote:

> justaguy <lichunshen84@gmail.com> writes:
>>onclick=addSomething();document.getElementById(id).style.display="none"
> 
>   What seems to be the intended attribute value for the
>   »onclick« attribute is
> 
> addSomething();document.getElementById(id).style.display="none"
> 
>   . It contains a quote character and therefore should be
>   quoted itself (see »§ 1.9. A quick introduction to HTML«
>   in »HTML 5.2 Editor's Draft, 29 December 2016«).

When will you learn to cite properly?

,-<https://w3c.github.io/html/>
| 
| […]
| Publication as a Editors Draft does not imply endorsement by the W3C 
| Membership. This is a draft document and may be updated, replaced or 
| obsoleted by other documents at any time. It is inappropriate to cite
| this document as other than work in progress.

The latest version of HTML5 is the HTML 5.1 Recommendation:

<https://www.w3.org/TR/2016/REC-html51-20161101/introduction.html#a-quick-introduction-to-html>
 
>   (There might be other errors in this code, but I would like
>   to restrict my report to one error only.)

<http://validator.w3.org/nu/> exists.

Of course, to let the button disappear that was clicked, one only needs

  <… onclick="this.style.display = 'none'" …>

In maintainable code, one would probably add a class name instead and let 
the stylesheet specify the formatting:

  <… onclick="this.classList.add('hidden')" …>

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]

#33122

Thomas 'PointedEars' Lahn <PointedEars@web.de> wrote on 26 Apr 2017 in 
comp.lang.javascript:

> In maintainable code, one would probably add a class name instead and let 
> the stylesheet specify the formatting:
> 
>   onclick="this.classList.add('hidden')"

classList is powerfull, had forgotten that one.

<http://caniuse.com/#feat=classlist>

<https://hacks.mozilla.org/2010/01/classlist-in-firefox-3-6/>

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web