We Keep Coding

Select variable string value [duplicate]

This question already has answers here:
Copy text string on click
(10 answers)
Closed 4 years ago.
I would like to take input from a text box, concatenate its value with a string, then copy it to the clipboard.
I get stuck at .select(), because it doesn't work with the variable. I inserted the alert before .select() to check its value, but that's okay. The alerted value should be copied to the clipboard.
function copyLink() {
var siteNumber = document.getElementById("number");
var home = "http://www.website.com/site";
var link = home.concat(siteNumber.value);
alert(link);
link.select();
document.execCommand("copy");
alert("Copied the text: " + link);
}
<input type="text" id="number">
<button onclick="copyLink()">Copy input as link</button>

It seems you need to append the value to the dom to select. For that case create a hidden input and add set its value to link. Then once copied again set it to empty string.
For string concatenation you can use +
function copyLink() {
var siteNumber = document.getElementById("number");
var home = "http://www.website.com/site";
var link = home + siteNumber.value;
let _h = document.getElementById('hiddenIp');
_h.value = link
//alert(link);
_h.select();
document.execCommand("copy");
_h.value = '';
alert("Copied the text: " + link);
}
<input type="text" id="number">
<button onclick="copyLink()">Copy input as link</button>
<input type='hidden' id='hiddenIp'>

The text to copy has to be in an element in the DOM, which is what you call select on (not a string). See comments:
function copyLink() {
// Get the value
var siteNumber = document.getElementById("number").value;
// Build the link
var link = "http://www.website.com/site" + siteNumber;
// Create an input to put it in and append it to the DOM
var input = document.createElement("input");
input.value = link;
document.body.appendChild(input);
// Select and copy
input.select();
document.execCommand("copy");
// Remove the temporary input
document.body.removeChild(input);
alert("Copied the text: " + link);
}
<input type="text" id="number">
<button onclick="copyLink()">Copy input as link</button>

select() only works with elements. You need to create one.
Or you can save value temporarily in the input element.
function copyLink() {
var siteNumber = document.getElementById("number");
var home = "http://www.website.com/site";
var temp = siteNumber.value
siteNumber.value = home + temp
siteNumber.select();
document.execCommand("copy");
alert("Copied the text: " + siteNumber.value);
siteNumber.value = temp
}
<input type="text" id="number">
<button onclick="copyLink()">Copy input as link</button>

Javascript onClick doesn't work with button [duplicate]

This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 6 years ago.
Pretty Straight forward. My button is not creating the input I need after the click event. I need the fields populated where the class "household" is. I cannot edit HTML only Javascript. Any ideas?
HTML:
<ol class="household"></ol>
<div>
<button class="add">add</button>
</div>
JS:
document.getElementsByClassName("add").onclick = function() {
createinput()
};
count = 0;
function createinput() {
field_area = document.getElementsByClassName('household')
var li = document.createElement("li");
var input = document.createElement("input");
input.id = 'field' + count;
input.name = 'field' + count;
input.type = "text"; //Type of field - can be any valid input type like text,file,checkbox etc.
li.appendChild(input);
field_area.appendChild(li);
//create the removal link
var removalLink = document.createElement('a');
removalLink.onclick = function() {
this.parentNode.parentNode.removeChild(this.parentNode)
}
var removalText = document.createTextNode('Remove Field');
removalLink.appendChild(removalText);
li.appendChild(removalLink);
count++
}

document.getElementsByClassName gives you object of all child elements which have all of the given class names . You will have to attach the event on each element by iterating over the array or by using index.
Here you can use document.querySelector for your example which returns the first Element matching with the selector.
https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
document.querySelector(".add").onclick = function() {
createinput()
};
count = 0;
function createinput() {
field_area = document.querySelector('.household')
var li = document.createElement("li");
var input = document.createElement("input");
input.id = 'field' + count;
input.name = 'field' + count;
input.type = "text"; //Type of field - can be any valid input type like text,file,checkbox etc.
li.appendChild(input);
field_area.appendChild(li);
//create the removal link
var removalLink = document.createElement('a');
removalLink.onclick = function() {
this.parentNode.parentNode.removeChild(this.parentNode)
}
var removalText = document.createTextNode('Remove Field');
removalLink.appendChild(removalText);
li.appendChild(removalLink);
count++
}
<ol class="household"></ol>
<div>
<button class="add">add</button>
</div>

It should be document.getElementsByClassName("add")[0].onclick
As Document.getElementsByClassName():
Returns an array-like object of all child elements which have all of
the given class names. When called on the document object, the
complete document is searched, including the root node. You may also
call getElementsByClassName() on any element; it will return only
elements which are descendants of the specified root element with the
given class names.
document.getElementsByClassName("add")[0].onclick = function() {
createinput()
};
count = 0;
function createinput() {
field_area = document.getElementsByClassName('household')
var li = document.createElement("li");
var input = document.createElement("input");
input.id = 'field' + count;
input.name = 'field' + count;
input.type = "text"; //Type of field - can be any valid input type like text,file,checkbox etc.
li.appendChild(input);
field_area.appendChild(li);
//create the removal link
var removalLink = document.createElement('a');
removalLink.onclick = function() {
this.parentNode.parentNode.removeChild(this.parentNode)
}
var removalText = document.createTextNode('Remove Field');
removalLink.appendChild(removalText);
li.appendChild(removalLink);
count++
}
<div>
<button class="add">add</button>
</div>

x.getElementsByClassName()
getElementByClassName returns a collection.
x.onclick
onclick is meant for single elements and cannot be directly applied to a collection. Thats why your code is not working.
If you wanted to use a collection then a loop would work as suggested by one of the other answers.
I would have a think about the approach you want to take see this answer on .getElementsByClassName().

How to create a simple input and output in pure Javascript

I'm new to Javascript and am trying to write code for a simple greeting. The user will have an input box to type their name in to and below a button for them to click that outputs a value of "Hello {name}!". If you could help me out I would appreciate it!

You could start doing something like this:
(function() {
// Creates <input id="myTextBox" type="text" />
var textBox = document.createElement("input");
textBox.id = "myTextBox";
textBox.type = "text";
// Creates <button id="myButton" type="button">Show</button>
var btnShow = document.createElement("button");
btnShow.id = "myButton";
btnShow.type = "button";
btnShow.innerHTML = "Show";
// When you click in the button, show the message.
btnShow.onclick = function showMessage() {
alert("Hello " + textBox.value + "!");
};
// Add created elements.
document.body.appendChild(textBox);
document.body.appendChild(btnShow);
})();
You can find more information about createElement function in this site: Document.createElement().

Function of appended child button [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 6 years ago.
I'm trying to make code to ask for your name, which then says, "Hello, _____, my name is Dolly." Then three buttons appear with options of what to do to Dolly.
Is there any way I can add a function onclick of the spawned buttons to create a response accordingly? I apologize if it's a bit messy and not dry, I'm kinda new to this.
<body>
<p id="dolly"></p>
<div id="div1">
<h3 id="try" class="enterN">Please enter your name</h3>
<input type="text" id="name" value="" placeholder="Please enter your name">
<button id="submit" onclick="yourName()">Enter</button>
</div>
<script>
function yourName() {
var x = document.getElementById("name").value;
if (x.length != 0) {
document.getElementById("dolly").innerHTML = "Hello, " + x + ", My name is Dolly.";
var btn = document.createElement("BUTTON");
var t1 = document.createTextNode("Say Hello");
btn.appendChild(t1);
document.body.appendChild(btn);
var btn = document.createElement("BUTTON");
var t2 = document.createTextNode("Hug Dolly");
btn.appendChild(t2);
document.body.appendChild(btn);
var btn = document.createElement("BUTTON");
var t3 = document.createTextNode("Kill Dolly");
btn.appendChild(t3);
document.body.appendChild(btn);
$(document).ready(function(){
$("#div1").remove();
});
} else {
document.getElementById("dolly").innerHTML = "Please enter your name.";
}
}
</script>
</body>

Hi you can set attribute onclick and pass your function like this
var btn = document.createElement("BUTTON");
var t1 = document.createTextNode("Say Hello");
btn.setAttribute("onclick", "function1()");
btn.appendChild(t1);
document.body.appendChild(btn);

You can add a new event listener to the created buttons.
btn.addEventListener('click', function() {
// do some things
});

You can set the onclick property with javascript like this:
btn.addEventListener('click', function(event) {
// code to be executed on click
}
for each of the child buttons you create.

to add the onclick function you do:
btn.onclick = function() {};
so for the first button you'd do
var btn = document.createElement("BUTTON");
btn.onclick = function() {};
var t1 = document.createTextNode("Say Hello");
btn.appendChild(t1);
document.body.appendChild(btn);

Removing items from a to do list using Javascript

Attempting my first Javascript project, playing around with DOM to make a To-Do List.
After adding an item, how do i get the 'Remove' button to function and remove the item + the remove button.
Furthermore, after a new entry is made, the list item still stays in the input field after being added. How can it be made to be blank after each list item.
And yes i know my code is kinda messy and there is most likely an easier way to create it but I understand it like this for now.
Any help is greatly appreciated. Thanks
JSFiddle Link : http://jsfiddle.net/Renay/g79ssyqv/3/
<p id="addTask"> <b><u> Tasks </u></b> </p>
<input type='text' id='inputTask'/>
<input type='button' onclick='addText()' value='Add To List'/>
function addText(){
var input = document.getElementById('inputTask').value;
var node=document.createElement("p");
var textnode=document.createTextNode(input);
node.appendChild(textnode);
document.getElementById('addTask').appendChild(node);
var removeTask = document.createElement('input');
removeTask.setAttribute('type', 'button');
removeTask.setAttribute("value", "Remove");
removeTask.setAttribute("id", "removeButton");
node.appendChild(removeTask);
}

You can simply assign event:
removeTask.addEventListener('click', function(e) {
node.parentNode.removeChild(node);
});
http://jsfiddle.net/g79ssyqv/6/

Edited the Fiddle... just try this
FiddleLink (Should work now, button and p-tag will be removed)
HTML
<p id="addTask"> <b><u> Tasks </u></b> </p>
<input type='text' id='inputTask'/>
<input type='button' onclick='addText()' value='Add To List'/>
JS
var row = 0;
function addText(){
var input = document.getElementById('inputTask').value;
if(input != "")
{
var node=document.createElement("p");
var textnode=document.createTextNode(input);
node.appendChild(textnode);
node.setAttribute("id","contentP"+row);
document.getElementById('addTask').appendChild(node);
var removeTask = document.createElement('input');
removeTask.setAttribute('type', 'button');
removeTask.setAttribute("value", "Remove");
removeTask.setAttribute("id", "removeButton");
removeTask.setAttribute("onClick", "deleterow("+ row +");");
node.appendChild(removeTask);
row++;
}
else
{
alert("Please insert a value!");
}
}
function deleterow(ID)
{
document.getElementById('contentP'+ID).remove();
}
Greetings from Vienna

Use this
// +your code
.....
node.appendChild(removeTask);
// + modify
removeTask.onclick = function(e){
var dom = this;
var p_dom = this.parentNode;
console.log(p_dom);
var parent_node = p_dom.parentNode;
parent_node.removeChild(p_dom);
}