I am writing a little script which should do the following actions:
1) a button click triggers a form to load.
2) an entry of the form is filled with a specific value.
My code looks something like this:
document.getElementById('formButton').click();
window.onload = function(){
document.getElementById('formEntry').value = "foo";
};
This script loads the form,but the form entry doesn't update.
I suppose that the problem is that the form entry hasn't loaded in the DOM yet, but onload doesn't seem to do the job... Any hints on what I'm doing wrong here?
Do this -
1) You have to put all of the document variables inside window.onload
window.onload = function() {
var formEntry = document.getElementById('formEntry');
var formButton = document.getElementById('formButton');
};
2) You have to change the formEntry when the formButton is clicked, so put the .value change inside another function like so
window.onload = function() {
var formEntry = document.getElementById('formEntry');
var formButton = document.getElementById('formButton');
formButton.addEventListener('click', function() {
formEntry.value = "foo";
});
};
or alternatively
window.onload = function() {
document.getElementById('formButton').addEventListener('click', function() {
document.getElementById('formEntry').value = "foo";
});
};
You should bind the button click to an event listener:
window.onload = function(){
document.getElementById('formButton').addEventListener('click',function(){
document.getElementById('formEntry').value = "foo";
});
};
By calling the .click() function you just trigger any given click event listeners, but you haven't declared one, and thats also propably not your intention.
Related
I am using bootstrap's list group to create a row of tabs. When someone clicks on an element in a table, it dynamically creates a new tab and appends it to that list group.
var newtext = "#"+ticket+" - "+parele.find("td:nth-child(3) strong").html();
var closebtn = $("<button>").addClass("close ml-2 mr-n2 newlyaddedclose").html("×");
var newdiv = $("<div>").addClass("d-flex justify-content-between").append(newtext).append(closebtn);
var newa = $("<a>").addClass("list-group-item list-group-item-action").attr("data-toggle","list").attr("href","#ticket"+ticket).attr("id","ticket"+ticket+"-tab").append(newdiv);
$("#ticketpanel").append(newa);
The problem I am having is the newly created close button. I need to bind a function that identifies when that is clicked to handle closing that tab, but it doesn't seem to be working. In my example here, I added the "newlyaddedclose" class to help identify the new element temporarily and I added the following code below to bind a function that is defined at the top of my script tag:
$(".newlyaddedclose").on("click",".close",closebtn).removeClass("newlyaddedclose");
This still doesn't work. When I inspect the close button element, console shows this error: Framework Event Listeners API Errors:
event listener's handler isn't a function or empt
Am I making this harder than it needs to be, or what am I doing wrong? I can simple put at the end of this element creation this:
$(".close").click(function() { ... });
But doing this starts to double up and triple up etc, those events on already created tabs.
EDIT:
Here is my entire block of script to clear up any confusion.
$(function() {
function closebtn() {
alert("Close button clicked...");
}
$(".ticket-line").click(function() {
var parele = $(this);
var ticket = parele.data("tnum");
// Check to see if ticket is already open in tabs
if($("#ticket"+ticket).length == 0) {
// Create tab on ticket panel
var newtext = "#"+ticket+" - "+parele.find("td:nth-child(3) strong").html();
var closebtn = $("<button>").addClass("close ml-2 mr-n2 newlyaddedclose").html("×");
var newdiv = $("<div>").addClass("d-flex justify-content-between").append(newtext).append(closebtn);
var newa = $("<a>").addClass("list-group-item list-group-item-action").attr("data-toggle","list").attr("href","#ticket"+ticket).attr("id","ticket"+ticket+"-tab").append(newdiv);
$("#ticketpanel").append(newa);
$(".newlyaddedclose").on("click",".close",closebtn).removeClass("newlyaddedclose");
// Create DIV with content
var newdata = $("<div>").addClass("tab-pane").attr("id","ticket"+ticket);
$("#ticket-tabs").append(newdata);
$("#ticket"+ticket+"-tab").tab("show");
} else {
// Ticket is already open, switch to it instead
$("#ticket"+ticket+"-tab").tab("show");
}
});
})
The error is clearly stating you are binding a non function to the event listener. So the error is saying that closeBtn is not a function. Your code, you defined closeBtn as the button you are trying to attach the event too. So change closeBtn in the click event listener to the name of the function you are actually trying to call. If it is the same function name, rename something.
Your problem:
var closeBtn = 1;
if (1===1) {
var closeBtn = 2;
console.log(closeBtn);
}
console.log(closeBtn);
It is unclear why you are selecting the element you just added. You can just attach the event when you create the button, no need to look up the element.
var closebtn = $("<button>")...
closeBtn.on("click", function (){
console.log('clicked', closeBtn);
});
Or use event delegation so any element you add will trigger the function.
$("#ticketpanel").on("click", ".close", function () {
const closeBtn = $(this);
console.log('clicked', closeBtn);
});
I'm creating buttons based on what a user enters into an input box. However, the function i have linked to the dynamically created buttons won't fire when pressed.
function btnCreate() {
num++;
userBtn = $("<button>")
userBtn
.addClass("btn search-term-btn dynamicElement")
.appendTo($(".btn-holder"))
.text(topics)
.attr("data-name", topics);
usedTopics.push(topics + num);
topics = [];
console.log(num);
};
$(".search-term-btn").on("click", ".dynamicElement", function () {
// takes the name of the button
searchValue = $(".search-term").attr("data-name");
console.log(searchValue);
})
The class is correct, ive checked with the inspector. I just can't seem to figure out why it's unresponsive
Create the click event on DOM.
$(document).on("click", ".search-term-btn .dynamicElement", function () {
console.log(this)
});
while you are creating the buttons, you can add the onclick function there..
like userBtn = $("<button onlcikc="somefunction(this)">")
OR
you can use on function which is
$('body').on( "click",".dynamicElement", function() {
//your code
});
I want to know WHY its not working.
I have a bunch of classes called yellow.
I then add an event listener to them with a callback function to activate upon clicking. What am I not seeing here? :(
function test(){
var allYellow = document.querySelector('.yellow');
allYellow.addEventListener('click', function(){
this.classList.toggle = 'testyellow';
})
}
test();
In JavaScript..
function myFunction() {
var element = document.getElementById("myDIV");
element.classList.toggle("mystyle");
}
I have two links on a page. When I click on the second link, it displays certain fields. I want to write a onkeyup() event handler for one of the fields. I have written the code like this and I'm missing something. Please help.
var inputBox;
$().ready(function() {
//cc_sec is the id of the second link in my page.
$('#cc_sec').click(function(){
inputBox = document.getElementById("{!$Component.pg.pb.cardForm.cardnumber}");
alert(inputBox.id);
//This alert is giving me the ID of the element correctly.
});
//This is not working. inputBox is declared as global variable.
inputBox.onkeyup = function(){
alert(inputBox.value);
document.getElementById('printCardNo').innerHTML = inputBox.value;
}
});
Please point out my mistake. TIA :)
UPDATE:
I can get the element by ID only after clicking the cc_sec link. So I cannot do inputBox = document.getElementById("{!$Component.pg.pb.cardForm.cardnumber}"); in the beginning of the ready function.
use jQuery .on to add eventhandler to dynamically created elements.
$('body').on("keyup","{!$Component.pg.pb.cardForm.cardnumber}",function(){
alert($(this).val());
document.getElementById('printCardNo').innerHTML = $(this).val();
});
You have two options
call document.getElementById in document ready:
var inputBox;
$().ready(function() {
inputBox = document.getElementById("{!$Component.pg.pb.cardForm.cardnumber}");
//cc_sec is the id of the second link in my page.
$('#cc_sec').click(function() {
alert(inputBox.id);
//This alert is giving me the ID of the element correctly.
});
inputBox.onkeyup = function() {
alert(inputBox.value);
document.getElementById('printCardNo').innerHTML = inputBox.value;
};
});
or set onkeyup in click event:
var inputBox;
$().ready(function() {
//cc_sec is the id of the second link in my page.
$('#cc_sec').click(function() {
inputBox = document.getElementById("{!$Component.pg.pb.cardForm.cardnumber}");
alert(inputBox.id);
//This alert is giving me the ID of the element correctly.
inputBox.onkeyup = function() {
alert(inputBox.value);
document.getElementById('printCardNo').innerHTML = inputBox.value;
};
});
});
Ok, so I have been trying for a few days now to figure out how to detect a user click, and assign new properties to a variable. I have attempted this in a few different ways most of them however not working.
So far I have this, which is pretty self explainitory.
var settings = {
objSlideTrigger: '#one', // link button id
objSlidePanel: '#content-one' // slide div class or id
};
if(document.getElementById('#one').click) {
var setup = settings;
setup.objSlideTrigger = '#one',
setup.objSlidePanel = '#content-one'
};
if(document.getElementById('#two').click) {
var setup = settings;
setup.objSlideTrigger = '#two',
setup.objSlidePanel = '#content-two'
};
when the user clicks a href on the page it I want it to be detected by the javascript and, for the correct setup to be placed within the settings var for use by the rest of the code.
I have two questions really the first being, I will have to duplicate the conditional statement at least ten times so is there anyway to condense/simplify the code.
secondly,When detecting a Href click in javascript do i have to assign an onclick value to the actual element in the html?
thanks again.
With jQuery
Assuming you're wanting to use jQuery because you've included it at the top, use:
$(document).on('click', '#one', function( event ) {
//Do Code here
//For #one click event
});
Although, to prevent DRY - keep it more generic by using Classes:
<div class="updatesettings" id="one">One</a>
<div class="updatesettings" id="two">Two</a>
<script>
$(document).on('click', '.updatesettings', function( event ) {
//Do Code here
//For all .updatesettings click event
alert( $(this).attr('id') );
});
</script>
With JavaScript
var OnOneClick = function() {
// Your click handler
};
var OneClick = document.getElementsById("#one");
OneClick.addEventListener('click', OnOneClick, false);
Then to listen for multiple, use by Class (Although not all IE versions can listen for this):
var AwaitedClickEvent = function() {
//Class Click
}
var WaitingClick = document.getElementsByClassName('clickme');
for (var i = 0; i < WaitingClick.length; i++) {
var current = WaitingClick[i];
current.addEventListener('click', AwaitedClickEvent, false);
}
Your Solution
<!-- Links with ID & Content -->
<div class="updatesettings" id="one" data-content="content-one">One</a>
<div class="updatesettings" id="two" data-content="content-two">Two</a>
<script>
/**
* Get the clicked element's ID
* and it's stored data-content string.
**/
$('.updatesettings').on('click', function( event ) {
var Id = $(this).attr('id'),
Content = $(this).data('content'),
setup = settings,
setup.objSlideTrigger = Id,
setup.objSlidePenl = Content;
console.log( setup );
});
</script>