We Keep Coding

Javascript - Paste specific text to textarea on button click

I new in Javascript. I'm working on my Django project and I want to add some buttons like img button. Here is example:
So when user will click img button in textarea will be added this text :
<img src="[YOUR IMAGE]">
Thanks for help.

If i understand your question correctly you have to call a function in javascript to write to your specified element and on your image you use a onclick.
something like:
onclick="document.location=this.id+'.html'
Sample:
$(function(){
var $display = $('#display');
$display.val(0);
$(document).on('click', 'button.number', function(){
if($display.val() != 0) {
$display.val($display.val() + $(this).val());
} else {
$display.val($(this).val());
}
});
});
JS Fiddle Link: http://jsfiddle.net/qohdjovu/
This was probably already answered here: Using jQuery to click the button and display the value of the button
Script function was made by: #R. Canser Yanbakan

You need more than an image if you're not aware of it already. I suggest using Glyphicons for that purpose, will simplify everything and will be more lightweight.
Say we use the fontawesome glyphs.
Create a bar above text area where you'll hold your controls,
<section>
<i id="control-bold" class="fa fa-bold" aria-hidden="true"></i>
<i id="control-italic" class="fa fa-italic" aria-hidden="true"></i>
</section>
<textarea id="textarea"></textarea>
For simplicity I used ids on the button control elements, and will use JQuery to listen to click events to make it even more simple.
$("#control-bold").click(function(){
// Bold was clicked append {bold} to text area with whatever..
$("#textarea").append("{bold}");
});
$("#control-italic").click(function(){
// Italic was clicked append {bold} to text area with whatever..
$("#textarea").append("{bold}");
});
Note this is a simple & basic example to get you started. Glyphicons and JQuery are only my suggestion for this question.

If you are looking for a way to change your button style, I will suggest you to use CSS instead of <img> HTML tag.
a CSS class/id for unselected button with the default background-image
a CSS class/id which override background-image or selected buttons
And you will add/remove classes using javascript element.classList.add('.selected') or element.classList.remove('.selected')

Reverting to original element ID

I have li blocks which onclick will change class ID as follows:
onclick = "document.getElementById('procblock1').id = 'procblock1Clicked';"
"document.getElementById('procblock2Clicked').id = 'procblock2';"
"document.getElementById('procblock3Clicked').id = 'procblock3';"
"document.getElementById('procblock4Clicked').id = 'procblock4';"
The line document.getElementById('procblock2Clicked').id = 'procblock2'; should revert any clicked elements (blocks) back to their original ID names.
The code works for changing the original id to the clicked id but doesn't have any effect in reverting previously clicked to the original as per lines 2,3 & 4.
I have searched hard for similar questions but can find nothing that covers this specific issue.

#Matthias - I acted upon your advice and came up with a very simplified jquery solution :
`$(function() {
$(".showinfo").click(function() { //using class instead of ID
$(".showinfo").removeClass("clicked"); //Remove all existing clicks
$(this).addClass("clicked"); //add the class to the clicked element });
});`
Posted solution in case anyone else has same query. Your help was appreciated.

If this really is part of the code you're using lines 2-4 won't work; onclick will only handle the first line. You should wrap it as a function to be called onclick, like onclick = "doStuff()" and add a function doStuff () {/* your code here */}. But that's just guessing as you only provide some part of the code in question.
In addition would be good to know what you want to achieve - in case you want to mark clicked elements, it would be a cleaner approach to add a class, e.g. "clicked" or "active", that you simply remove later on instead of changing ids.

Trying to insert a new html with input button

My goal is to create a button that when pushed will execute javascript to insert html that creates a new div with content inside of it. I have been able to get the button to click and
preform a .toggleclass and I have tried to use .html , .insertAfter(input.html()); but I have not had any luck.
My HTML for button
<input id="slideshow" name="viewing" value="View Slideshow" type="button"
onClick="newOverlay();">
current javascript
function newOverlay(){
var newItem = $("<p>Add this text instead</p>");
$("input").insertAfter(this.html("<p> Is this going to work</p>"));
}
I know this is adding a < p > and not a div but I tried to make it similiar thinking if I could get it to insert this paragraph then I could work on inserting the div.
Thanks for looking at this.

If you want to insert a p tag after every input, then you should do
$("input").after("<p> Is this going to work</p>");
If you want to inser the p tag after the input that was clicked then you would do
$(this).after("<p> Is this going to work</p>");

Where do you want to append your new item?
You should do something like this I guess.
function newOverlay(){
var newItem = $("<p>").text("Add this text instead");
$("YOUR_SELECTOR_HERE").append(newItem);
}
Give a sample with jsFiddle.

Create own numpad with inputs

I've been searching the web for some tips regarding how to make your own numpad, created with html code, to act as a numpad would on the computer.
I have this numpad on my website that would give an input to a textfield in the same div. I've given a value to each button and now I guess I would have to create something more so that the numbers will add to my text field.
I'm really a beginner with programming so maybe this is really easy. Thanks for the help!

You could do it, alternatively, with jQuery. jQuery is better IMHO if you need a simple easy solution (jQuery is generally easier and faster).
HTML:
<div id="myDiv"> </div> //the div to which we add text
<div id="buttonContainer"> //this is the div containing the numbers (the numpad)
<button value="one"> one </button>
<button value="two"> two </button>
</div>
jQuery:
$("#buttonContainer button").click(function() {
$("#myDiv").append($(this).val());
});
http://jsfiddle.net/DLzUU/1/
What this does is: when you click any button inside the div with id of 'buttonContainer', it adds its value to the div with the id of "myDiv".
On the Javascript subject, if you want a VERY good guide: http://javascript.info/

what you need is to learn javascript. With javascript you will be able to write code to do this.
<script>
function AddValueToTextField(val)
{
document.getElementByID( <textfiled ID> ).value += val;
}
</script>
<button onClick="AddValueToTextField(this.value)"></button>
this is only very basic but it is a rough idea of what is needed, the button is set to call the function "AddValueToTextField" when it is clicked. When the function is called the value of the button is sent along with it. Inside the function it gets a handle on the textfield and adds the value of the button to whatever was already there, I'd suggest looking at:
http://www.w3schools.com/js/
as a place to start learning javascript.

you can try http://keith-wood.name/keypad.htmlkeypad example, this is an awesome example

$(document).ready(function(){
var selected;
$(".admin_loginid input").focus(function(){
selected = $(this);
});
$(".loginbtn").click(function(){
selected.val(selected.val() + $(this).val());
});
});
Solved it that way and it works really well, thanks for the help! Now my selected input box takes the input from the numpad that i've created.

Removing Textboxes

Im new to js kindly help me! im using functionality to add text boxes dynamically im done with that part now i want make a js function that removes text boxes on a click on remove button. any help ?

You can use bellow JavaScript function to Remove elements.
function removeElement(divNum) {
var d = document.getElementById('myDiv');
var olddiv = document.getElementById(divNum);
d.removeChild(olddiv);
}
If you have more information you can visit here.

You can either remove a child with
document.getElementById(n).removeChild(thebox);
or you can do as on this thread Remove <p class="classname"> in Javascript? (not recommanded for your case)
Finally, you can use jquery (famous library) with the function $("#id_of_element").remove(); (best and easiest solution)