I would like to fill a form from an array and then to remove that element from the array.
So when I click on the 'Fill It' button - form should be filled and now array should be without that element.
The Problem is that the array is not popped, shifted or sliced and it always loads the same data into form fields.
Html form I have:
<h3><input class="FormControl" placeholder="Discussion Title"></h3>
<textarea class="Composer-flexible" placeholder="Write something..." style="height: 166.2px;"></textarea>
My code:
var button = document.createElement("button");
button.innerHTML = "Fill It";
var body = document.getElementsByTagName("body")[0];
body.appendChild(button);
button.addEventListener ("click", function() {
var arr =
[["title1","post1"],["title2","post2"],["title3","post3"]];
var post = arr[0][1];
var title= arr[0][0];
document.getElementsByClassName("FormControl")[0].value=title;
document.getElementsByClassName("Composer-flexible")[0].value = post;
var arr=arr.slice(1);
console.log(arr);
});
Fiddle link:
https://jsfiddle.net/q1vc26oe/2/
After I fill it I have to review it a little bit and then I would submit it.
But problem occurs next time when I load html page and try to fill the same form but this time with 'title2' and 'post2' it loads 'title1' and 'post1' cause the array is not popped, shifted or sliced.How to do that?
In addition (it would be the next step when I make sure that script is running well) how to submit it, not automatically, but after 15 seconds cause I'd like to have a brief review before submitting (this is not big priority right now so you can add to your answer or not....)
This will be your working code: -
var button = document.createElement("button");
button.innerHTML = "Fill It";
var body = document.getElementsByTagName("body")[0];
body.appendChild(button);
var arr = [
["title1", "post1"],
["title2", "post2"],
["title3", "post3"]
];
button.addEventListener("click", function() {
var post = arr[0][1];
var title = arr[0][0];
document.getElementsByClassName("FormControl")[0].value = title;
document.getElementsByClassName("Composer-flexible")[0].value = post;
arr = arr.slice(1);
console.log(arr);
});
You were creating a new array (named 'arr') every time on button click, so make sure you create the array only once.
And make sure you check if the array is empty on button click
Related
var buttonDivEl = document.getElementById('buttonDiv');
var startFunctionEl = document.getElementById('startFunction');
startFunctionEl.onclick = myFunction;
function myFunction() {
startFunctionEl.remove();
var createButton = document.createElement("button");
createButton.innerHTML = "my new button";
document.buttonDivEl.appendChild(createButton);
}
<div id="buttonDiv"></div>
<button id="startFunction">Click</button>
My HTML is just a button (id of startFunction) inside of a div (id of buttonDiv)
I'm trying to make it so when I click the startFunction button, it will remove it and add a new button inside of buttonDiv, but it doesn't seem to be working properly. if I replace the following code:
document.buttonDivEl.appendChild(createButton);
with
document.body.appendChild(createButton);
it works, but I want it to append to the buttonDiv specifically, not the body.
Change your code from:
document.buttonDivEl.appendChild(createButton);
To:
buttonDivEl.appendChild(createButton);
I am making a javascript note-taking app. Here is the code so far:
Javascript is:
var inputValue = document.getElementById('myInput');
var input = document.getElementById('myInput');
var button = document.getElementById('myButton');
function run(){
localStorage.setItem('inputer', inputValue);
let p = document.createElement('p');
p.id = 'content';
p.innerHTML = inputValue.value;
document.body.appendChild(p);
}
window.addEventListener('load', () => {
var savedUserData = localStorage.getItem('inputer');
var p2 = document.createElement('p');
p2.innerHTML = savedUserData.value;
document.body.appendChild(p2)
});
And the HTML is:
<input id = "myInput">
<button id = "myButton" onclick = "run();">
Take note:
</button>
It works by stacking notes on top of notes and saving the data in local storage. But for some reason, it does not save the notes correctly. It will stack them but not save them. Also, it says this: "undefined". I would assume that that is because it checks the value of the input first before anything has been in it. And as I am writing this I am thinking that my idea is not going to work because there is mutiple input. So how would I fix this so this so the user can stack notes ontop of notes, and they will all be stored in local storage and come back to the user when the page reloads? Thank you and have a good day!
It seems your first line of code should say:
var inputValue = document.getElementById('myInput').value;
first, the prototype:
function Notification (title, message, id) {
var $title = this.title = title;
var $message = this.message = message;
var $id = this.id = title;
/* ---------------creating HTML prototype */
var $mainDiv = $("<div></div>").appendTo($("#wrapper"));
$mainDiv.attr('id', $id);
$mainDiv.addClass('main-div');
var $dismissButton = $("<button>X</button>").appendTo($mainDiv);
$dismissButton.attr('id', 'dismissButton');
var $pTitle = $("<h2></h2>").appendTo($mainDiv);
$pTitle.attr('id', 'title');
$pTitle.text($title);
var $para = $("<p></p>").appendTo($mainDiv);
$para.attr('id', 'message');
$para.text($message);
var $ul = $("<ul></ul>").appendTo($mainDiv);
var $li1 = $("<li></li>").appendTo($ul);
$li1.attr('id', 'okButton');
var $button = $("<button>Ok</button>").appendTo($li1);
$button.addClass('buttons');
/* ---------------Dismissing notifications */
$("#dismissButton").click(function() {
document.getElementById($id).remove();
});
};
So, the prototype is made using new Notification(*arguments here*) and there we get a box with a notification widget. so far so good.
when i press the X button (id dismissbutton) it should remove the box, and it does.
However. if i use the new notification several times i get several boxes (with different ids for the $mainDiv) with their dismiss buttons not working. the upmost widget box's dismiss button is the only one that works, and it deleted all the other boxes as well.
I need to seperate them and have the dismiss button working for each box seperately.
thanks in advance :)
The problem here is that you are creating multiple elements with the same ID (which is invalid HTML by the way).
Every time your run
var $dismissButton = $("<button>X</button>").appendTo($mainDiv);
$dismissButton.attr('id', 'dismissButton')
A new "dismiss button" is being created, which has the same ID (dismissButton) with the previous "dismiss buttons" (if any).
The other thing is that every time you run
$("#dismissButton").click(function() {
document.getElementById($id).remove();
});
You instruct only the first "dismiss button" to remove the element identified by the ID $id when clicked.
In my opinion the best way to fix this is by using references to the elements themselves and not IDs.
So I would make the creation of the dismiss button like this;
var $dismissButton = $("<button>X</button>").appendTo($mainDiv);
And determine its click callback like this
$dismissButton.on('click', function () {
$mainDiv.remove();
});
This should work fine for you.
Last, but not least I would avoid giving the same ID to any elements, since it produces invalid HTML code. You are doing so in the following lines
$dismissButton.attr('id', 'dismissButton');
$pTitle.attr('id', 'title');
$para.attr('id', 'message');
$li1.attr('id', 'okButton');
var button = document.createElement("button");
button.type = "button";
button.className = "button";
button.innerText = "OK";
button.addEventListener("click", function () {
console.log("Hello!");
}, false);
When I do this, the button never gets that event listener. I've tried attachEvent, button.onclick, and nothing seems to work. The button shows up fine with the class and text.
EDIT: So basically what I'm trying to do is programmatically show a "popup" array of divs.
Here is a screenshot of what it looks like: http://i.imgur.com/IqaOq.png, and I set it up like this: var x = new JMTK.Custom.MessageDialog(), then to add a popup, I just type x.addMessage({template: {type: JMTK.Custom.MessageDialog.templates.alert, title: "Alert title", message: "This is a message here", button1: {text: "Hello"}}})
This is the addMessage():
var content = document.createElement("div");
//htmlObject.template is the object that has all the info, 'this' is the scrim element that contains each "white" popup"
content.innerHTML = MessageDialogClass.html.alert(htmlObject.template, this).innerHTML
which calls this function:
alert: function (template, element) {
//Array of functions
var callbacks = MessageDialogClass.callbacks;
var alert = document.createElement("div");
var id = Date.now();
alert.id = id;
var header = document.createElement("h1");
header.innerText = (template.title ? template.title : "ALERT");
var paragraph = document.createElement("p");
paragraph.innerText = (template.message ? template.message : "No message specified")
var button = document.createElement("button");
button.type = "button";
button.className = "button";
button.innerText = (template.button1.text ? template.button1.text : "OK");
button.addEventListener("click", function () {
if (template.button1.callback) {
template.button1.callback();
}
//MessageDialogClass.popElement(id);
//delete callbacks.id;
}, false);
alert.appendChild(header);
alert.appendChild(paragraph);
alert.appendChild(button);
callbacks.id = alert;
return alert;
},
But again, when I click on the button, nothing happens, and in the DOM Explorer there is no onclick attribute.
It's hard to say what your solution might be. You've provided good detail about what you want to do with the button click, but I'm afraid there's something else at play. I wonder if you have an element in front of the button that keeps it from receiving the mouse click. I see you're in a WinJS project for Windows 8. You have really good dev tools in VS2012. Break just after you add the button to your DOM and go to the DOM Explorer and see if you find the button. Go to the JavaScript Console and see if you can access the button. See if you can add an event listener manually there. Try adding the button manually in your markup and then see if adding an event works. Hope one of these gets you to the solution. Good luck.
The issue was that I was creating a div in my 'alert' template, and then setting the innerHTML of another div to that div. So it wouldn't allow me to set the event listener because it wasn't part of the DOM.
So instead of doing
var content = document.createElement("div");
//htmlObject.template is the object that has all the info, 'this' is the scrim element that contains each "white" popup"
content.innerHTML = MessageDialogClass.html.alert(htmlObject.template, this).innerHTML
I just did
var content = document.createElement("div");
//htmlObject.template is the object that has all the info, 'this' is the scrim element that contains each "white" popup"
content = MessageDialogClass.html.alert(htmlObject.template, this).innerHTML
because alert is returning a div already. So yeah, it had to do with setting the innerHTML rather than just setting it equal to the DOM node.
I think you need append your button before set the event listener.
I'm going to develop a firefox extension which adds a button beside the file input fields (the <input type="file"> tag) when a file is selected.
The file overlay.js, which contains the extension's logic, manages the "file choose" event through this method:
var xpitest = {
...
onFileChosen: function(e) {
var fileInput = e.explicitOriginalTarget;
if(fileInput.type=="file"){
var parentDiv = fileInput.parentNode;
var newButton = top.window.content.document.createElement("input");
newButton.setAttribute("type", "button");
newButton.setAttribute("id", "Firefox.Now_button_id");
newButton.setAttribute("value", "my button");
newButton.setAttribute("name", "Firefox.Now_button_name");
parentDiv.insertBefore(newButton, fileInput);
}
}
...
}
window.addEventListener("change", function(e) {xpitest.onFileChosen(e)},false);
My problem is that, everytime I choose a file, a new button is being added, see this picture:
http://img11.imageshack.us/img11/5844/sshotn.png
If I select the same file more than once, no new button appears (this is correct).
As we can see, on the first file input, only one file has been selected.
On the second one I've chosen two different files, in effect two buttons have been created...
On the third, I've chosen three different files.
The correct behavior should be this:
when a file is chosen, create my_button beside the input field
if my_button exists, delete it and create another one (I need this, beacuse I should connect it to a custom event which will do something with the file name)
My question is: how can I correctly delete the button? Note that the my_button html code does not appear on page source!
Thanks
Pardon me if I'm thinking too simply, but couldn't you just do this?
var button = document.getElementById('Firefox.Now_button_id')
button.parentNode.removeChild(button)
Is this what you were looking for? Feel free to correct me if I misunderstood you.
Solved. I set an ID for each with the following method:
onPageLoad: function(e){
var inputNodes = top.window.content.document.getElementsByTagName("input");
for(var i=0; i<inputNodes.length; i++){
if(inputNodes[i].type=="file")
inputNodes[i].setAttribute("id",i.toString());
}
}
I call this method only on page load:
var appcontent = document.getElementById("appcontent"); // browser
if(appcontent)
appcontent.addEventListener("DOMContentLoaded", xpitest.onPageLoad, true);
Then I've modified the onFileChosen method in this way:
onFileChosen: function(e) {
var fileInput = e.explicitOriginalTarget;
if(fileInput.type=="file"){
var parentDiv = fileInput.parentNode;
var buttonId = fileInput.id + "Firefox.Now_button_id";
var oldButton = top.window.content.document.getElementById(buttonId);
if(oldButton!=null){
parentDiv.removeChild(oldButton);
this.count--;
}
var newButton = top.window.content.document.createElement("input");
newButton.setAttribute("type", "button");
newButton.setAttribute("id", buttonId);
newButton.setAttribute("value", "my button");
newButton.setAttribute("name", "Firefox.Now_button_name");
parentDiv.insertBefore(newButton, fileInput);
this.count++;
}
}