Member Avatar for Erco21

Hi!

I created a button and a textbox using javascript, now i want to make that when my button is pressed it gets the value from my textbox, and puts it in another textbox (got that sorted)
only thing i cant find anywhere is how to make a button to do something when clicked.

and by the way, my button is awfully small, looks like a very small bar, or a button-worm (maybe you knwo what i mean, if you dont, il post a screenshot), so i would be thankfull if someone has a soultion for that

im sorry that i have to waste your time, but i spent this whole evening trying to find solutions to this problems, but with no luck

  • 4 Contributors
  • 13 Replies
  • 353 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Erco21
Member Avatar for fxm

how to make a button to do something when clicked.

Either include the onclick="" event attribute in the button definition or assign something to the .onclick property of the button.


my button is awfully small

Buttons can be styled (plus the value can be made longer or its font can be styled).

Member Avatar for rajarajan2017 
<input type="submit" name="commit" value="Submit" onClick="passValue()">

<script language="javascript">
function passValue(){
	var text=txt1.value;
	txt2.value=text;
}
</script>

Hope it helps!

Edited by rajarajan2017 because: n/a
Member Avatar for Erco21

well, i tried:

var btn = document.createElement("button");

	var exel = document.getElementById("existingthing");
	
	var pn = oIT1.parentNode;
	pn.insertBefore(btn,exel);
btn.onclick  = thetextbox[0].value = pass + cmd + box.value;

and:

var btn = document.createElement("button");

	var exel = document.getElementById("existingthing");
	btn.setAttribute("onclick","thetextbox[0].value = pass + cmd + box.value");
	var pn = oIT1.parentNode;
	pn.insertBefore(btn,exel);

both didn't work, and i dont know what im missing here.

Member Avatar for parry_kulk

Try this..

Put the passing of value in a function (have appropriate parameters to the function),

function putValue(){
     thetextbox[0].value = pass + cmd + box.value;
}

Now first check the browser type since event handling is different in IE and other browsers. A simple way can be,

//detecting the browser version
var bname = navigator.appName;
var isIE = false;
if (bname == "Microsoft Internet Explorer"){
	isIE = true;
}
else{
	isIE = false;
}

Now attach the function to the onclick event of the button as,

var btn = document.createElement("button");
 var exel = document.getElementById("existingthing");

if(isIE){
	btn.onclick = new Function("putValue()");
}
else{
	btn.setAttribute("onclick", "putValue()");
}
 
var pn = oIT1.parentNode;
pn.insertBefore(btn,exel);

As for the width of the button you can always set it using CSS

Member Avatar for Erco21

well, that didn't exactly work.

I didnt even create a button with your code, so i simply made this: (it's for myown use, so i ditched the browser code as i have firefox)

var doc = document.createElement("button");
	doc.setAttribute("onclick", "putValue()");
	var nw1 = document.getElementById("existingelement");
	var bz1 = nw1.parentNode;
	bz1.insertBefore(doc,nw1);

and i got the button to show up, but it seem's that somehow i cant set it's attribute to work. Are you sure that i can put a call to a function in quotation marks?

Member Avatar for fxm

Are you sure that i can put a call to a function in quotation marks?

Yes. But...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta name="generator" content=
    "HTML Tidy for Windows (vers 25 March 2009), see www.w3.org">
    <title></title>
  <script>
	function putValue(){alert('here')}
  </script>
  </head>
  <body>
    <button id="existingelement"></button>
	<script type="text/javascript">
		var doc = document.createElement("button");
//		doc.setAttribute("onclick", "putValue()");
		doc.onclick = putValue;
		var nw1 = document.getElementById("existingelement");
		var bz1 = nw1.parentNode;
		bz1.insertBefore(doc,nw1);
    </script>
  </body>
</html>

The .onclick version [line 16] works in all browsers.
The .setAttribute version [line 15] doesn't work in IE but does work in others (note the difference in the function reference).

BTW: line 15 without the () won't work anywhere. And line 16 with the () wouldn't be a syntax error but it does something you probably don't expect.

Member Avatar for Erco21

well, i use firefox, so it shouldnt matter, as both 'work' as you say

but the problem is that icant get either of those to work
so when i use:
doc.setAttribute("onclick", "putValue()");
the button shows up on the page, but it is useless (doesnt do anything)

and when i use:
doc.onclick = putValue;
the button doesnt even show up on the page
(even tried doc.onclick = putValue(); but button doesnt show up)

i really don't have a clue what it could be

Member Avatar for fxm

i use firefox

The code I posted [the line 16 version] was tested in Firefox 3.6.3 and works - although the default buttons are only about 2px high.

It also works in Chrome 4.1.249.1064, Safari 4.0.5, IE 8.0.6001.18702 and Opera 10.53.3374.

Member Avatar for Erco21

well, i really dont know what the problem is then

'although the default buttons are only about 2px high.'
i get something like that, but only when i exclude doc.onclick = putValue;
is there maybe another ways of doing the same thing maybe?

Member Avatar for Erco21

hmm, i added doc.onclick = putValue; after inserting the button, then the button shows up, but it again doesnt do anything

Member Avatar for Erco21

Okay, i got it to work after messing around with it:

the actual problem was in printing the text to the textbox (with code in my function, something was wrong with that, but i fixed)

so now the only problem is: how do i make my button to look 'normal'

Member Avatar for fxm

i get something like that, but only when i exclude doc.onclick = putValue;

Um, that means that you haven't defined function putValue() properly.

Member Avatar for Erco21

nope, there was no problem with that, i solved it
as i said, the problem was in value setting code

so, thanks for help everyone :D

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.