Remove button and assign on click - javascript

I'm working on coding javascript and I'm kind of a noob here. This is my code:
<button onclick="test()">Click Me!</button>
<script>
function test()
{
var btn = document.createElement("BUTTON");
var name = document.createTextNode("Button");
btn.appendChild(name);
document.body.appendChild(btn);
btn.onclick = ex();
}
ex()
{
}
</script>
I want to do two things, and I can't seem to find a solution. I want to:
use the function "ex" to remove the button that says "Click Me!"
assign btn.onclick to the button I just created.
Can anyone help me with this?
EDIT: Although all you guys are trying to help me, I'm not sure you guys are quite understanding the question fully. So, expanding on the first request:
I want to use the function "ex" to delete the button "Click Me!" I want this button to be deleted from the page, and no longer visible.
Second:
I want the btn.click in the function "test" to only be assigned to the button created in the function "test." I've noticed that when you click "Click Me!" it runs the function "ex."

try this one
<script>
function test() {
var btn=document.getElementsByTagName('button')[0];
btn.attributes[0].value="ex()";
btn.innerText="second function";
}
function ex() {
console.log("ex executer");
}
</script>
<button onclick="test()">
click me!
</button>

<button onclick="test()">
Click Me!
</button>
<script>
function test(){
var btn = document.createElement("BUTTON")
var name = document.createTextNode("Button")
btn.appendChild(name);
document.body.appendChild(btn);
btn.onclick = ex;//() remove. btn.onclick is a handler i.e. a function object,
// not the result your ex() returns.
}
function ex(){//add function
this.style.color = 'red'; // makes text of the button red
// **ONLY if button IS clicked**
}
</script>

Related

How to change button text when clicked?

I am running my website off of squarespace and I have a button that says "DELIVER ME" but when you click it, I want it to say "G.T.F.O" while the next page loads.
I don't have a code for this and need help writing one.
function changeButtonText(DELIVER ME, G.T.F.O.){
if (this.value== "DELIVER ME"){
this.value = "G.T.F.O.";
} else {
this.value = "DELIVER ME";
}
}
changeButtonText();
I want the button to say "DELIVER ME" until you click it, then once you click it the button will say "G.T.F.O."
I want the button to say "DELIVER ME" until you click it, then once you click it the button will say "G.T.F.O."
Given this button:
<input type="button" id="myButton" value="DELIVER ME">
You could do it like this:
const myButton = document.getElementById("myButton");
myButton.addEventListener("click", function() {
this.value = "G.T.F.O."
});
Or, if the button is like this:
<button id="myButton">DELIVER ME</button>
You would do:
const myButton = document.getElementById("myButton");
myButton.addEventListener("click", function() {
this.innerText = "G.T.F.O."
});
function changeText() {
return document.querySelector("#button").innerHTML = "New text";
}
document.addEventListener("click", changeText);
<button type="button" id="button">Text</button>
most of the answer can solve your particular problem but I just want to add more information about selecting htmlElement.
in VanillaJS(pure Javascript) DOM. you can select element with 3 DOM method.
Select by ID's attribute
elem = document.getElementById("id")
Select by class attribute
elem = document.getElementsByClassName("class")
Select by TagName
elem = document.getElementByTagName("Tag")
and 1 more extra way which used.
elem = document.querySelector(selector)
selector can be one of ".class","#id", or "Tags"
Thanks
<button type="button" id="btn" onclick=changeButtonText()>deliver me</button>
<script>
function changeButtonText(){
document.getElementById("btn").innerHTML = "GTFO";
}
</script>

Execute a function when pressing a button in jQuery

I am quite new to programming, and have met a problem.
I really want to run this function, when I press a button. Here is the function that I want to run:
function generateTip() {
var tip = tipsList[generateNumber()];
var tipElement = document.querySelector('.js-tip');
tipElement.innerHTML = tip;
}
Alright, I want to run this function, when pressing a button, and here is the code for my jQuery button:
$(document).ready(function(){
$('button').click(function() {
//run function here
});
});
It doesn't have to be jQuery, I just thought that would be easier. I would be very grateful if somebody would help and explain.
Thanks in advance.
Inside your HTML, you can use the onclick event handler to call a function when the button is clicked, using vanilla javascript. Like so:
<button onclick="generateTip()">button text</button>
If you want a solution using jQuery and your current code, all you have to do is call the generateTip() function inside the $('button').click wrapper:
$(document).ready(function(){
$('button').click(function() {
generateTip();
});
});
So if you have a .js file with this code:
function generateTip() {
var tip = tipsList[generateNumber()];
var tipElement = document.querySelector('.js-tip');
tipElement.innerHTML = tip;
}
You can then attach it to an HTML element like so:
<button onclick="generateTip()"> Button </button>
Hope that helps
You're already there?
JQUERY Script:
<script>
$(document).ready(function(){
$('button').click(function() {
generateTip();
});
});
function generateTip() {
var tip = tipsList[generateNumber()];
var tipElement = document.querySelector('.js-tip');
tipElement.innerHTML = tip;
}
</script>
or by onclick only in the actual HTML and a script above:
<script>
function generateTip() {
var tip = tipsList[generateNumber()];
var tipElement = document.querySelector('.js-tip');
tipElement.innerHTML = tip;
</script>
Then in your HTML something like this
<input type="button" name"button" onclick="generateTip()";
To execute the function generateTip() on click, put this in your button code:
<input type="button" name="any" onclick="generateTip()"/>

Create a Button in Javascript

Hey i want to create a button like this:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="button" value="click-me" id="myButton" onclick="myFunction()">
</body>
</html>
but i want to create from javascript, and i'm doing something really wrong cause my button does not seem
var MyButton = document.createElement("BUTTON");
MyButton.id = "Mybuttonid";
MyButton.className = "MyButtonclass";
MyButton.onclick("myFunction()");
Div.appendChild(MyButton); //i have others things working in this "Div" only this button doesn't appear
You've a misuse of onclick in the posted code, if you check the console you could notice the following message :
"Uncaught TypeError: MyButton.onclick is not a function"
To attach the click event using the onclick it should be :
MyButton.onclick = myFunction;
Else it will be better to attach the event using addEventListener() instead like :
MyButton.addEventListener("click", myFunction);
Hope this helps.
var Div = document.getElementById("my_div");
var MyButton = document.createElement("BUTTON");
MyButton.id = "Mybuttonid";
MyButton.className = "MyButtonclass";
MyButton.addEventListener("click", myFunction);
Div.appendChild(MyButton);
function myFunction(){
alert('test');
}
<div id="my_div"></div>
You are doing it wrong because Button does not exists(but MyButton exists).
Instead of :
var MyButton = document.createElement("BUTTON");
MyButton.id = "Mybuttonid";
MyButton.className = "MyButtonclass";
MyButton.onclick("myFunction()");
Div.appendChild(MyButton);
Use addEventListener to add click event to the button; And change Div.appendChild(button); to Div.appendChild(MyButton);
function myFunction(){
alert("here");
}
var Div = document.getElementById('div');
var MyButton = document.createElement("button");
MyButton.id = "Mybuttonid";
MyButton.innerHTML ="CLICK ME"
MyButton.className = "MyButtonclass";
MyButton.addEventListener("click", myFunction, false);
Div.appendChild(MyButton); //i have others think working in this "Div" only this button doesn't appear
<div id="div">
</div>
In both HTML and Javascript, you are declaring your onclick function the wrong way. Instead of
<input type="button" value="click-me" id="myButton" onclick"myFunction()">
it should be
<input type="button" value="click-me" id="myButton" onclick="myFunction()">
Which means that this piece of code in Javascript here:
MyButton.onclick("myFunction()");
Should be
MyButton.onclick = function(){ myFunction() };
By doing this and solving the typo that other users mentioned, it should work just fine.

Javascript: How to get element by variable name within the function?

function(){
var btn=document.createElement("BUTTON");
var t=document.createTextNode("yes");
btn.appendChild(t);
document.body.appendChild(btn);
document.getElementById(btn).onclick = function() {next()};
}
I know this is wrong because btn is a variable name, not an Id. Could someone help me change my 6th line of code so that I can run the function next() after onclick of btn?
**I need to have my commands inside this function, and cannot make an id outside this function.
You already have a reference to the element, so use that
function functionName() {
var btn = document.createElement("button");
var t = document.createTextNode("yes");
btn.appendChild(t);
document.body.appendChild(btn);
btn.addEventListener('click', next, false);
}
FIDDLE
You have already button reference in btn variable so attach event with btn variable see blow
function(){
var btn=document.createElement("BUTTON");
var t=document.createTextNode("yes");
btn.appendChild(t);
document.body.appendChild(btn);
btn.onclick = function() {next()};
}
btn is not an id, it is a variable which has the reference of the button object.
You can add onclick event directly to btn variable:
btn.onclick = next;

Why does the onclick fire next function not assigned to it?

Why clicking the button fires the alert? It is assigned to the paragraph, not button.
HTML:
<button onclick="foo()">Click me</button>
<p id="hidden" style="display:none"> I was hidden </p>
Javascript:
function foo(){
document.getElementById("hidden").style.display = "block";
document.getElementById("hidden").onclick = innnerClick();
}
function innnerClick(){
alert("Ouch! That hurt!")
}
Because of this line:
// ----------------------------------------------------vv
document.getElementById("hidden").onclick = innnerClick();
Here you call the innnerClick function immediately.
Just remove () after to pass the reference to a function instead of calling it, i.e.
document.getElementById("hidden").onclick = innnerClick;
Since, you need to add the reference of the function like this:
function foo(){
document.getElementById("hidden").style.display = "block";
document.getElementById("hidden").onclick = innnerClick;
}
not directly calling it.
Fiddle Demo
In jQuery, we can reproduce the same issue like:
$('button').click(function () {
$('#hidden').show();
$('#hidden').click(innnerClick()); <-- see the function with () here
});
Fiddle Demo
The issue is same here, we just need to pass the function reference to click handler here like:-
$('#hidden').click(innnerClick);
Fiddle Demo

Categories