I have a template that I'm cloning to make Single Page Application. Inside this template are some div's that should have a unique id's so that it should be working individually when I open multiple apps(clone multiple divs)
<template id="templ">
<div id="name"></div>
<div id="btn">
<fieldset id="fld">
<input type="text" id="userMessage"placeholder="Type your message…" autofocus>
<input type="hidden">
<button id="send" >Save</button>
</fieldset>
</div>
</template>
and I'm cloning it like this
var i =0
let template = document.querySelector('#templ')
let clone = document.importNode(template.content, true)
clone.id = 'name' + ++i // I can't change the Id o this name div
document.querySelector('body').appendChild(clone)
Thanks
clone.id is undefined since clone is a #document-fragment with two children.
You need to query the 'name' child and change its id, for example like this:
const template = document.querySelector('#templ')
const body = document.querySelector('body')
function appendClone(index){
let clone = document.importNode(template.content, true)
clone.getElementById('name').id = 'name' + index
// all other elements with IDs
body.appendChild(clone)
}
Then you can iterate over the amount of clones and simply call the function with the loop index:
let clones = 5
for (let i = 0; i < clones; i++){
appendClone(i)
}
store the dynamic HTML data in script element and add when ever required by replaciing with dynamic data.
HTML Data:
<script id="hidden-template" type="text/x-custom-template">
<div id='${dynamicid}'>
<p>${dynamic_data}</p>
</div>
</script>
Script to replace and append.
var template_add = $('#hidden-template').text();
var items = [{
dynamicid: '1',
dynamic_data: '0'
}];
function replaceDynamicData(props) {
return function(tok, i) {
return (i % 2) ? props[tok] : tok;
};
}
var dynamic_HTML = template_add.split(/\$\{(.+?)\}/g);
$('tbody').append(items.map(function(item) {
return dynamic_HTML.map(replaceDynamicData(item)).join('');
}));
Related
I am a newbie at web development. I am trying to display data that is being stored in javascript array, inside an unordered list as list elements.
I have tried looping through the elements in the array and display them one at a time using for loops but its not working
let linksArray = [] // array to store link leads while browsing
let inputEl = document.getElementById("input-el") // to get a hold on the input element from the dom
let displayEl = document.getElementById("display_link-el")
//function to save links inputs into linksArray
function save(params) {
linksArray.push(inputEl.value)
console.log(linksArray);
localStorage.setItem("mylinks", JSON.stringify(linksArray))
inputEl.value = ""
displayEl.textContent = linksArray
}
//function to conver linksArray to a list element in the DOM
function convetToListli(linksArray) {
for (let i = 0; i < linksArray.length; i++) {
let links = "<li>"
linksArray[i]
" </li>"
}
}
<input id="input-el" title="lead" placeholder="input weblink" type="text">
<button id="input-btn" onclick="save()">SAVE </button>
<button id="del-btn" ondblclick="delLeads()">DELETE</button>
<div>
<div>
<ul id="display_link-el"></ul>
</div>
<div>
<ul id="log_link-el"></ul>
</div>
</div>
I have added small correction to your script
function save(params) {
linksArray.push(inputEl.value)
console.log(linksArray);
inputEl.value=""
displayEl.innerHTML = convetToListli(linksArray)
}
//function to conver linksArray to a list element in the DOM
function convetToListli(linksArray) {
var links = ""
for (let i = 0; i < linksArray.length; i++) {
links= links + "<li>"+linksArray[i]+" </li>"
}
return links
}
This is just for example purchase
NOTE: Make sure to filter the input field while using innerHTML because it will leads to XSS
You should learn basic DOM manipulations. Here's one possible solution for your question
const list = document.querySelector('.list');
const links = ['link 1', 'link 2', 'link 3'];
links.forEach(link => {
let item = document.createElement('li');
item.textContent = link;
list.appendChild(item)
})
<ul class="list"></ul>
I am inserting the values of an input into an array of objects. Then, I want to get those values e show inside the HTML. Inserting each value inside the object is not the problem, every time I click the button, each value is successfully added. When I console.log() the array, it shows only one of each value added. The problem is when I try to show the content of the object inside the HTML element, it inserts all the data from the object over and over again, but I just want to add the last value added and keep what was previously inserted, not to add everything again.
What am I doing wrong?
This is my HTML
<main>
<div class="add-recipes">
<form id="form">
<h2>Add Recipe</h2>
<div class="input-wrapper">
<div class="text-input-wrapper">
<label for="title"
>Title
<input type="text" name="title" id="recipe-title" />
</label>
</div>
</div>
<button id="send-recipe-btn" type="submit">Send Recipe</button>
</form>
</div>
<div class="recipes-container"></div>
</main>
This is my JS File
let recipes = [];
const addRecipe = e => {
e.preventDefault();
let recipe = {
title: document.getElementById('recipe-title').value
};
recipes.push(recipe);
document.querySelector('form').reset();
recipes.forEach(e => {
const recipeContainer = document.querySelector('.recipes-container');
const recipeTitle = document.createElement('div');
recipeTitle.classList.add('recipe-title');
recipeContainer.append(recipeTitle);
recipeTitle.textContent = e.title;
});
console.log(recipes);
};
document.getElementById('send-recipe-btn').addEventListener('click', addRecipe);
Thanks for any tip or help to solve this.
Have the forEach()loop to start before recipeTitle.textContent = e.title;
let recipes = [];
const addRecipe = e => {
e.preventDefault();
let recipe = {
title: document.getElementById('recipe-title').value
};
recipes.push(recipe);
document.querySelector('form').reset();
const recipeContainer = document.querySelector('.recipes-container');
const recipeTitle = document.createElement('div');
recipeTitle.classList.add('recipe-title');
recipeContainer.append(recipeTitle);
recipes.forEach(e => {
recipeTitle.textContent = e.title;
});
console.log(recipes);
};
document.getElementById('send-recipe-btn').addEventListener('click', addRecipe);
In your event handler, you are looping over the recipes array and creating a new element every single time the button is pressed.
Just remove the loop and it will work properly
My code looks like this:
function myFunction(result) {
var json = JSON.parse(result)
var jsonKeys = Object.keys(json)
var items = document.getElementById("items");
var adds = items.getElementById("add");
clearA()
var i;
for (i = 0; i < jsonKeys.length; i++) {
var btn = document.createElement("BUTTON");
console.log(jsonKeys[i]);
btn.innerHTML = jsonKeys[i]
btn.setAttribute("id", jsonKeys[i]);
btn.onclick = function() { run(this.id); }
items.appendChild(btn)
}
}
I can get items and use them but when I try to get the child element "add" I get items.getElementById is not a function
This is the html:
<div id="items">
<div id="add">
<input type="submit" value="add" onclick="foo(add)">
</div>
</div>
Change it to:
var items = document.getElementById("items");
var adds = document.getElementById("add");
Since ids are meant to be unique on a document, only document.getElementById exists. You could use items.querySelector('#id'), but this is probably a manifestation of a larger problem where you have similar HTML structure for multiple elements, with duplicated ids. In this case, it is recommended that you switch to classes and use items.querySelector('.classname').
I have an array in JavaScript as shown in the example below. My question is: how can I have an h1 element for each value of the array when a button is clicked?
Names = []
function submit() {
let inputValue = document.getElementById("name").value;
Names.push(inputValue);
let frame = document.getElementById("frame");
frame.innerHTML = `<div><h1>${Names}</h1></div>`
}
<button onclick="submit()">Submit</button>
<input placeholder="name" id="name">
<div id="frame"></div>
How do I create separate H1 elements which contain each value from the array?
You can do it like below, by emptying the frame innerHTML every time you wish to add a new one and then iterating through the Names list and creating new h1 elements using document.createElement("h1"). The key here is to use append() to add the created element to the desired element.
Check below:
var Names = []
function submit() {
let inputValue = document.getElementById("name").value;
Names.push(inputValue);
let frame = document.getElementById("frame");
frame.innerHTML = "";
Names.forEach(function(el, i) {
let h1 = document.createElement("h1");
h1.innerHTML = Names[i];
frame.append(h1);
});
}
<button onclick="submit()">Submit</button>
<input placeholder="name" id="name">
<div id="frame"></div>
Another, and possibly better approach would be to just use append() to add the new input, like this:
var Names = []
function submit() {
let inputValue = document.getElementById("name").value;
Names.push(inputValue);
let frame = document.getElementById("frame");
let h1 = document.createElement("h1");
h1.innerHTML = inputValue;
frame.append(h1);
}
<button onclick="submit()">Submit</button>
<input placeholder="name" id="name">
<div id="frame"></div>
I think you mean whenever the user enter a name
and press submit.. the name should be added to a list with id frame right?
If yes then you just need to fix alittle problem:
frame.innerHTML = `<div><h1>${Names}</h1></div>`
this line of code is causing this issue, you are rewriting the new name on top of the old one, and what you should do is something like:
frame = old frame + new name
in code :
frame.innerHTML += `<div><h1>${Names}</h1></div>`
or
frame.innerHTML = frame.innerHTML+ `<div><h1>${Names}</h1></div>`
both lines of codes do the same thing but are written in a different way
I'm trying to use javascript to create a set of elements over and over again once the user enters a text where it would display the text with a button with an image in it to the side of it but I could not find a way to do it efficiently.
The current method I was going to create would require each element to have a id tag to it so that I could call appendChild to join the elements together.
I also need to have a create element be appended into another create element which adds to the issues
This is what I'm trying to achieve in the html code (the div would not be needed to be created as it is in the html code already)
function addToList(input) {
console.log(x);
let task = document.createElement('p');
task.id = x;
task.appendChild(document.createTextNode(input));
document.getElementById('listOfTasks').appendChild(task);
addCheckBox(x);
x++;
}
function addCheckBox(id) {
let checkBox = document.createElement('a');
checkBox.className = 'button is-rounded is-small';
checkBox.id = 'checkBox';
document.getElementById(id).appendChild(checkBox);
let a = document.createElement('span');
a.className = 'icon is-small';
a.id = 'apple';
document.getElementById(id).appendChild(a);
let b = document.createElement('i');
b.className = 'fas fa-check';
document.getElementById(id).appendChild(b);
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css"/>
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
<div class="container">
<div id="listOfTasks"></div>
</div>
<section class="section">
<div class="container">
<div class="field box form-popup" id="addTask">
<div class="control">
<div class="field is-grouped">
<label class="label"><b>Task to add</b></label>
</div>
<input
type="text"
class="input"
placeholder="Enter Task"
id="task"
required
/>
</div>
<button
type="button submit"
class="button is-success"
id="submit"
onclick="closeForm()"
>
Add
</button>
</div>
</div>
</section>
The current output is shown as
Would be grateful if anyone knows a better method to do this
Make a function that reduces boilerplate code when creating element
function create(name, props, children) {
let elem = document.createElement(name); // create it
const parent = props.parent // we use parent prop elsewhere
let keys = Object.keys(props) // collect keys
keys = keys.filter(function(key) { // remove parent prop from keys
return key !== 'parent'
})
keys.forEach(function(key) { // assign props to element
elem.setAttribute(key, props[key])
})
if (children && children.length) { // add children to element
children.forEach(function(child) {
elem.appendChild(child)
})
}
if (parent) { // attach to parent
document.getElementById(id).appendChild(elem);
}
return elem // return it, to customize further
}
And then
function addCheckBox(id) {
create('a', {
id: 'checkBox', // simple prop
parent: id, // parent prop
class: 'button is-rounded is-small' // simple prop
})
var span = create('span', {
parent: id,
id: 'apple',
class: 'icon is-small'
}, [create('i', { // demo of children
class: 'fa fa-check'
}])
span.setAttribute('data-something', 1) // demo of customizing
}