I am trying to make function that will post comment that'll add a headline and a text-section, based on a constructor-object. #Title and #text are the two bars in which the text will go. #form is the button the event listens to. I can't seem to get it to work now. Ideas?
function commentPost (title, text){
this.title = $("title").val;
this.tekst = $("text").val;
}
var commentPosts = [];
var formular = $('#form');
formular.on('click', function getTarget(e) {
e.preventDefault();
var jsTitleInput = $('title').val;
var jsTextInput = $('text').val;
var newComment = new commentPost(jsTitleInput, jsTextInput);
commentPost.push(newComment);
console.log(newComment);
});
Related
I have a question I am working with a form based shopping cart add function and a livesearch (PHP) function where it requests new data with the same classes. I have seen multiple examples besides (document.ready) but none of them seemed to work correctly after the DOM Content has been modified by the PHP livesearch function. (The current method is on the document ready function as you guys can see.
Thanks in advance!
// Icon Click Focus
$('.product').on('click', function() {
var strId = '';
var strId = $(this).attr('class');
var strId2 = strId.replace(' product','');
var strId3 = strId2.replace('product-','');
var formData = "product"+strId3;
document.getElementById("product_toevoeg_id").value = strId3;
var productNaam = $("#"+formData+" .f-productnaam").val();
document.getElementById("productnaam").innerHTML = productNaam;
document.getElementById("product_naam_form").value = productNaam;
var productIngredienten = $("#"+formData+" .f-ingredienten").val();
document.getElementById("ingredienten").innerHTML = productIngredienten;
document.getElementById("ingredienten_form").value = productIngredienten;
I'm trying to create an image slider, in which moving the handle on the slider will change the image to be displayed.
In the code below, I use an onchange function to dynamically update the image
(id = "image") based on the current value of slider (id = "image-slider-response").
var imageGroup1 = ['imageA.jpg','imageB.jpg','imageC.jpg'];
var slide = document.getElementById('image-slider-response');
var imageDiv = document.getElementById("image");
slide.onchange = function() {
imageDiv.src = imageGroup1[this.value];
}
Now, I'm trying to pass imageGroup as an argument to the onchange function to extend the code above to other image groups.
I followed this link http://www.jstips.co/en/javascript/passing-arguments-to-callback-functions/ but didn't seem to work. Any suggestions to fix this?
var imageGroup1 = ['imageA.jpg','imageB.jpg','imageC.jpg'];
var imageGroup2 = ['imageD.jpg','imageE.jpg','imageF.jpg'];
var slide = document.getElementById('image-slider-response');
var imageDiv = document.getElementById("image");
function myFunction(x){
return function(){
sliderDiv.innerHTML = slide.value;
imageDiv.src = x[slide.value];
}
}
var imageGroup = imageGroup1;
slide.addEventListener("onchange", myFunction(imageGroup));
You're on the right track with the callback there, there's just one thing - when using addEventListener, don't prefix the event with on: just use the plain event name.
slide.addEventListener("change", myFunction(imageGroup));
So, I am trying to make an element and then assign an onclick to it through JS.
Here is my code so far:
HTML
<div id = "Programs" onclick = "Cpb()">Programs</div>
JS
function Cpb() {
document.getElementById("AllBody").innerHTML = "";
var rh = document.createElement("h2");
var rht = document.createTextNode("Recent Programs");
rh.id = "Recentt";
var rh1 = document.createElement("h4");
var rh1t = document.createTextNode("test");
rh1t.onclick = window.open('website');
rh1.appendChild(rh1t);
rh.appendChild(rht);
}
So does anybody know how I can do this?
This javascript worked for me:
let h4Node = document.createElement("H4");
h4Node.innerHTML = "4th Header";
h4Node.onclick = function (){
alert('Oi!');
};
document.getElementById("demo").appendChild(h4Node);
Html:
<div class="demo"></div>
It will put an h4 element with an onclick event listener inside the demo div.
I think you want addEventListener.
Example:
rh1t.addEventListener('click', myHandlerFunction);
function myHandlerFunction () {
// ...
}
You can continue using onclick as you have in your code. But you'll need to do as I've done above and assign a function reference to it. Like this:
rh1t.onclick = myHandlerFunction;
function myHandlerFunction () {
window.open('website');
}
I am retrieving some information from an xml file ( movie information ) and I am creating dynamically some DOM elements according to each movie. I want, when I click on the test element, to get the value of the title of the movie. Right now, no matter which movie I click, it gets the title of the last movie that was introduced.
How can I get the title of each individual movie when I click on that div and not the last one introduced by the for-loop?
xmlDoc=xmlhttp.responseXML;
var x=xmlDoc.getElementsByTagName("movie");
for (i=0;i<x.length;i++)
{
var titlu = x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue;
var description = x[i].getElementsByTagName("description")[0].childNodes[0].nodeValue;
var descriere = document.createElement('div');
descriere.className='expandedDescriere';
descriere.innerHTML = description;
var titlediv = document.createElement('div');
titlediv.className = 'title';
titlediv.id='title';
titlediv.innerHTML = title;
var test=document.createElement('div');
test.className='test';
test.onclick= function(){
var filmName= test.previousSibling.innerHTML;
alert(filmName);
}
placeholder.appendChild(titlediv);
placeholder.appendChild(test);
placeholder.appendChild(descriere);
}
I think your problem might be in the function you assigned to onclick:
test.onclick= function(){
var filmName= test.previousSibling.innerHTML; // <===
alert(filmName);
}
the marked line should be var filmName= this.previousSibling.innerHTML;
My guess is that the var test is hoisted out of the for loop, meaning that when the loop finished, all the onclick function are referencing the same test variable which is the last element you created.
Use this to reference the clicked element:
test.onclick = function() {
var filmName = this.previousSibling.innerHTML;
alert(filmName);
};
I am trying to write some code that upon clicking on a button, a div is populated as seen in the code below. The problem is that I want to ensure that if the button is clicked multiple times, that the div reloads so to speak. I tried implementing this with the refreshDiv function below, but with this included the action of clicking the button does nothing.
function buttonClickHandler() {
var divString = "foodJournal";
refreshDiv(divString);
var divID = document.getElementById("foodJournal");
var fieldset = document.createElement("fieldset");
var legend = document.createElement("legend");
legend.innerHTML = "Food Log";
legend.setAttribute('id', "legend");
divID.appendChild(fieldset);
fieldset.appendChild(legend);
//refreshes food journal div
var refreshDiv = function(element) {
node = document.getElementById(element);
while (node.hasChildNodes()) {
node.removeChild(node.lastChild);
}
};
}
Any help is appreciated!
You are making a call to refreshDiv before actually declaring the variable. Move the variable declaration above the call to it and it should work.
function buttonClickHandler() {
var divString = "foodJournal";
//refreshes food journal div
var refreshDiv = function(element) {
node = document.getElementById(element);
while (node.hasChildNodes()) {
node.removeChild(node.lastChild);
}
};
refreshDiv(divString);
var divID = document.getElementById("foodJournal");
var fieldset = document.createElement("fieldset");
var legend = document.createElement("legend");
legend.innerHTML = "Food Log";
legend.setAttribute('id', "legend");
divID.appendChild(fieldset);
fieldset.appendChild(legend);
}
The code, as you have it written will result in an error in the console. On Chrome, you would see:
Uncaught TypeError: undefined is not a function
pointing right at the first refreshDiv(divString) statement.
While variables are hoisted in javascript, only the declaration is hoisted, not the assignment. (see fiddle with error)
A simple fix would be to move both the variable declaration and its assignment above the first call to refreshDiv. (Simple fix example)
function buttonClickHandler() {
var divString = "foodJournal";
//refreshes food journal div
var refreshDiv = function(element) {
node = document.getElementById(element);
while (node.hasChildNodes()) {
node.removeChild(node.lastChild);
}
};
refreshDiv(divString);
var divID = document.getElementById("foodJournal");
var fieldset = document.createElement("fieldset");
var legend = document.createElement("legend");
legend.innerHTML = "Food Log";
legend.setAttribute('id', "legend");
divID.appendChild(fieldset);
fieldset.appendChild(legend);
}
As written in your sample, there really is no reason to have a separate method to clear the div. If this wasn't just to illustrate the problem you were having, you might consider refactoring the code a bit to reduce some of the redundancy and remove the unnecessary function call.