I want to produce buttons through Javascript that can also do the form function. Here is how i am doing but my form function does not work when i click. Please help me out on this.
External Javascript
var onef
onef="Apple"
var twof
twof="Orange"
Now this is what i am doing in HTML page
<script>
document.write("<button>")
document.write(onef)
onClick=("this.form.T4.value++;")
</script>
<script>
document.write("<button>")
document.write(twof)
onClick=("this.form.T5.value++;")
</script>
The script works right but onClick function not working.
ouldn't you have to do this:
<script>
document.write("<button ")
document.write('onClick="this.form.T4.value++;">')
document.write(onef)
document.write("</button>")
</script>
What you are doing in your original code is building the string "<button>apple" and creating a variable called onClick with a value of "this.form.T4.value++;". What I believe you need to do is build a string with the whole button tag in it, which is what the code above is doing.
I have never seen code like this before for creating a button with JavaScript. I would go with something more like this;
var onef ="Apple";
var twof ="Orange";
function createButton(context, func, text){
var button = document.createElement("input");
button.type = "button";
button.value = text;
button.onclick = func;
context.appendChild(button);
}
createButton(document.body, function(){ this.form.T4.value++; }, onef);
createButton(document.body, function(){ this.form.T5.value++; }, twof);
An example can be seen here http://jsfiddle.net/4yV4V/
This gives you some reusable code for creating the button and passing in what ever you want the onclick even to be. Also you could customise this code for other situations.
Related
Hi great coding community,
I was struggling here for the whole weekend with this question in my head. I am trying to call a function within document.getElementBy... element but I am still getting undefined output. Well, I got the output from the function, but only if I put there a return value into the LoginFunction(). Otherwise only undefined.
But problem is, that this function is not returning anything. I'm just creating the buttons with it. (Maybe it should return something, but I designed it so poorly :D)
Anyway, my aim is to create a buttons into newly created div tag. I know that with return value (at least with simple text) it works. I got text within the new div. But without return value, nothing happened. And I tried these options:
// creating div, with id or with class - doesnt matter.
global_div = document.createElement("div");
// global_div.classList.add("two");
global_div.id = "two";
// appending it into the body.
document.body.appendChild(global_div);
// now calling the function:
document.getElementById('two').innerHTML = LoginFunction();
document.getElementsByClassName('two')[0].innerHTML = LoginFunction();
document.getElementById('two').call = LoginFunction();
document.getElementsByClassName('two')[0].call = LoginFunction();
document.getElementById('two').innerText...
document.body.appendChild(global_div);
and other options, versions, combinations... nothing helped.
The LoginFunction() is:
function LoginFunction() {
console.log("LoginFunction called")
var myLoop_var;
let outcome;
<!-- START BUTTON -->
let btn = document.createElement("button");
btn.innerHTML = "START";
btn.id = "start";
document.body.appendChild(btn);
btn.addEventListener("click", function () {
btn.disabled = true;
btn2.disabled = false;
console.log("START BUTTON clicked");
clearInterval(global_var);
global_var = setInterval(function(){myLoop()}, 1000);
console.log('MY LOOP VAR: ', global_var);
});
}
There are two other buttons with more less same code. So I am waiting for the click on the buttons. So basically they are not returning anything.
And in short, I want to click on one button which create a three new buttons in one div. Then, when I click on the same button, all three buttons are removed together with created div.
I would be really appreciating if somebody could give me a hint or lead me on the right way with this.
Many thanks to all of you. :)
ok sorry, that's my poor explanation skill as well. Pictures maybe helped more.
This is start:
This is after buttons are created:
And my dreamed result:
<div id="two">
<button id="start">START</button>
<button id="stop" disabled="">STOP</button>
<button id="stop" disabled="">STOP</button>
</div>
No, you can not call function with innerHTML as you are doing.
As per your way, innerHTML means you need to provide whole HTML string with all three buttons inclued which should be returned by function.
e.g
Elem.innerHTML = func()
func(){
return "<HTML string with all buttons tag />"
}
Another way, when you click on button, just call your function which perform adding of all buttons in parent div and append it, so you won;t bother about innerHTML or return values.
e.g
onclick="func()"
func(){
div_elem.append(buttons) // on innerHTML
}
<button id=trainingbutton document.getElementById("trainingbutton").addEventListener("click",
}); ></button>
function(){
trainingbuttonclicked=()=>document.getElementById("trainingbtn").innerHTML = "Hello World";
Completely new to JavaScript and am trying to hook up a button to show an alert. Above is my HTML first and my app.js is below. I would like to try to hook up the event without using a simple onclick event handler. My preferred method would be either the event handler or the inner HTML method. Any advice appreciated. I know it's something simple but maybe Ive been staring at it too long, because I can't see the answer
You need your script tag in order to insert an eventlistener, like so
<script>
const button = document.querySelector('#trainingButton"); // # id's and . for selecting a
class in the dom (document object model)
button.addEventListener('click', function(event) {
const string = 'some string';
alert(string);
});
</script>
Your Button id should only contain a string like trainingButton so that it becomes <button id="trainingButton">
> the script tag should be placed in the bottom of your body tag, in order for the DOM to load properly before any javascript runs
for more info
https://www.w3schools.com/jsref/met_element_addeventlistener.asp
You need to separate your HTML from your javascript. You can either have them in separate files or in the same.
If you'd like them in the same file you can do the following. (Note: the script has to be after the button because we want it to run after the button has been created)
<button id="trainingbutton">Training Button</button>
<script>
var trainingbutton = document.getElementById("trainingbutton");
trainingbutton.addEventListener('click', function(event) {
trainingbutton.innerHTML = "Hello World";
});
</script>
You can also define the script above between the script tags in a seperate file (*.js) and link it to your HTML file using <script src='*.js'></script>. As you add more to your HTML and JS it can help to organize.
Currently assigned the task of creating a website which uses python to visualize a network. With this, after clicking a button, the python script will run off of specific parameters the user sets. To avoid a huge load request, we only want the user to click the button once, and not be able to run the script multiple times. The idea we came up with was having the button be clicked once, and then after the one request, become disabled(until they refresh the page, although I know they can just run it again, but we will discuss that problem once we get there). We are currently using an anchor tag to call upon the python script using PHP as well. I believe that since we are using an anchor tag, we may have to change the href attribute of the anchor tag so that it just doesn't run the python script numerous times, making the button useless even if its clickable.
We've tried using JavaScript functions:
let toggleVisual = false;
let hideVisual = function() {
let visual = document.getElementsById('visual');
if (toggleVisual = false) {
visual.disabled = true;
toggleVisual = true;
}
}
and more JavaScript:
document.getElementById('form-button').onclick = function () {
this.disabled = true;
}
and even some HTML:
<button id="form-button" class="visualize-btn">Visualize</button>
PHP code calling python script:
<?php
if (isset($_GET["run"])) {
$output = shell_exec('sh test.sh');
echo "<pre>$output</pre> works";
}
?>
I expect that when I click the button to run the script, the button (or anchor tag) will become disabled, ensuring that the python script won't run multiple times.
Welcome to StackOverflow! You were close.. Check out the onclick() event, you'll probably like it. A simple code based on your first attempt would be something like:
<button id="form-button" class="visualize-btn" onclick="doSomething();">Visualize</button>
<script type="text/javascript">
var wasClicked = false;
function doSomething() {
if(wasClicked) { return; }
wasClicked = true;
// Your code here
alert('Hello world!');
}
</script>
Best of luck with your website!
I'm creating a website where I'll be displaying my work. Then I noticed that I needed a Cookie Notice. Because I want to make it 100% by myself (without generators, etc.) I started creating it. The Cookies themselves are working fine, but main.js is not registering the button's onClick.
Here's the code:
var acceptButton = document.getElementById("cookieAccept");
acceptButton.onclick = function() {
alert("HELLO");
}
My button's code:
<button id="cookieAccept" class="cookieButton">Accept</button>
I've been Googling a lot, searching through StackOverflow, etc. There are no answers that worked for me (yet). Here are the solutions I tried:
jQuery
object.onclick = function() {}
object.addEventListener("click", false);
Put the object.addEventListener("click", false) inside of window.onload
Any hints/help?
- XaafCode
EDIT
Console error:
Uncaught TypeError: Cannot set property 'onclick' of null
The possible reason in this case would only be is.
This will work
<button id="cookieAccept" class="cookieButton">Accept</button>
<script>
var acceptButton = document.getElementById("cookieAccept");
acceptButton.onclick = function() {
alert("HELLO");
}
</script>
Make sure you don't have Js before html is written. First html then Js. Also make sure you don't have two id of same name . This may some time create problem.
This will not work
<script>
var acceptButton = document.getElementById("cookieAccept");
acceptButton.onclick = function() {
alert("HELLO");
}
</script>
<button id="cookieAccept" class="cookieButton">Accept</button>
Be sure to wrap your js code in a function that you'll register to be executed once the browser sets up all the html:
window.onload = function() {
var acceptButton = document.getElementById("cookieAccept");
acceptButton.onclick = function() {
alert("HELLO");
}
}
Cfr.: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload
Remember to put HTML code before Javascript syntax under tag.
Basically, I'm working with static HTML that is written in stone. I cannot add an onclick to the dropdown menu, which is usually what I would do.
The following is what I have:
<script type="text/javascript">
function replicate() {
var tb1 = document.getElementById("ctl00_ContentPlaceHolder1_DropDownList_Country_17");
var tb2 = document.getElementById("ctl00_ContentPlaceHolder1_TextBox_State_19");
tb2.value = tb1.value;
}
</script>
Of course, this works fine for the actual "transfer" of data from the drop down to textbox, but it never gets executed. Usually I would execute the function "onclick" in the HTML, but I cannot do that. Is there another way to "listen" for a click on that dropdown?
Just register the handler:
document.getElementById("yourdropdownID").onchange = replicate;
can you use JQuery? Link to JQuery (like all javascrip files) and do the following in a script tag somewhere (or add to your current script tag.
<script>
$(document).ready(function(){
//Use the ID of the control here:
$("#ct100_ContentPlaceHolder1_DropDownList_Country_17").change(function(){
replicate();
});
});
<script>