Here am not able to add text inside the text box based on the dropdown selection.
example: If I Choose option2 in the dropdown the textbox will filled as option2
(function() {
'use strict';
setInterval(function () {
if (document.getElementById('ddid')) {
console.log('Found Tag dropdown button');
return;
}
var widgetcontentwrapper = document.getElementsByClassName('widget-content-wrapper');
if (widgetcontentwrapper.length > 0) {
console.log('Found widgetcontentwrapper controls');
var buttonToolbar = widgetcontentwrapper[0].children[0];
//Create array of options to be added
var array = ["option1", "option2", "option3", "option4"];
//Create and append select list
var selectList = document.createElement("select");
selectList.setAttribute('class', 'ddclass');
selectList.setAttribute('id', 'ddid');
//myParent.appendChild(selectList);
selectList.addEventListener('change', favTutorial, false);
var div = document.createElement('div');
div.setAttribute('class', 'flex-item');
div.appendChild(selectList);
buttonToolbar.insertBefore(div, buttonToolbar.firstChild);
for (var i = 0; i < array.length; i++) {
var option = document.createElement("option");
option.value = array[i];
option.text = array[i];
selectList.appendChild(option);
}
}
},
3000)
function favTutorial() {
var mylist = document.getElementsByClassname("ddclass");
document.getElementsByClassname("input-large").value = mylist.options[mylist.selectedIndex].text;
}
}
)()
<div class="widget-content-wrapper">
<div class="arrow"></div>
<form class="input-compressed"><fieldset>
<legend class="offscreen">
Add a Tag
</legend>
<div class="editable-field-change">
<span class="input-append input-smaller"><input class="input-large" data-link="proposedTag" placeholder="Add a tag (any text)..." size="16" type="text">
</span>
</div>
<div class="tags">
<ul class="unstyled editable-list inline-list"></ul>
</div>
</fieldset></form>
</div>
There's two problems here. Firstly, the method is getElementsByClassName(), not getElementsByClassname() - note the uppercase 'N'.
Secondly, that method returns an array-like object, not a single Element object. Therefore you can't call value or options on it directly. Given that there's only 1 instance of the element in the question you can just use [0] to access the first element in the set.
(function() {
'use strict';
setInterval(function() {
if (document.getElementById('ddid')) {
console.log('Found Tag dropdown button');
return;
}
var widgetcontentwrapper = document.getElementsByClassName('widget-content-wrapper');
if (widgetcontentwrapper.length > 0) {
var buttonToolbar = widgetcontentwrapper[0].children[0];
//Create array of options to be added
var array = ["option1", "option2", "option3", "option4"];
//Create and append select list
var selectList = document.createElement("select");
selectList.setAttribute('class', 'ddclass');
selectList.setAttribute('id', 'ddid');
//myParent.appendChild(selectList);
selectList.addEventListener('change', favTutorial, false);
var div = document.createElement('div');
div.setAttribute('class', 'flex-item');
div.appendChild(selectList);
buttonToolbar.insertBefore(div, buttonToolbar.firstChild);
for (var i = 0; i < array.length; i++) {
var option = document.createElement("option");
option.value = array[i];
option.text = array[i];
selectList.appendChild(option);
}
}
}, 3000)
function favTutorial() {
var mylist = document.getElementsByClassName("ddclass")[0];
document.getElementsByClassName("input-large")[0].value = mylist.options[mylist.selectedIndex].text;
}
})()
<div class="widget-content-wrapper">
<div class="arrow"></div>
<form class="input-compressed">
<fieldset>
<legend class="offscreen">
Add a Tag
</legend>
<div class="editable-field-change">
<span class="input-append input-smaller"><input class="input-large" data-link="proposedTag" placeholder="Add a tag (any text)..." size="16" type="text">
</span>
</div>
<div class="tags">
<ul class="unstyled editable-list inline-list"></ul>
</div>
</fieldset>
</form>
</div>
That being said, your code is doing some very odd things. Why do you repeatedly try and create the select element, and exiting from the function when it already exists after the first iteration?
I would assume from the context that this is a rudimentary method of checking the DOM to see if a dynamic element has been created from some external source. If this is the case, use a MutationObserver instead.
Also, avoid generating HTML in your JS code. Put it in <template /> elements and clone it. This way there is never any HTML logic within the JS.
Here's a full working example of this:
(function() {
'use strict';
// define MutationObserver to check the DOM for new .widget-content-wrapper elements being created
var newWidgetContainerObserver = new MutationObserver(mutations => {
mutations.forEach(m => {
m.addedNodes.forEach(n => {
if (n.className === 'widget-content-wrapper')
createSelectForWidget(n);
});
});
});
newWidgetContainerObserver.observe(document, { attributes: false, childList: true, characterData: false, subtree: true });
let widgetContainer = document.querySelector('#widget-container');
// when a new .widget-content-wrapper node is added to the DOM by external
// code, append the select to it.
let createSelectForWidget = node => {
let selectTemplate = document.querySelector('#dd-template').content.cloneNode(true);
let container = node.querySelector('.arrow');
let html = container.appendChild(selectTemplate);
container.addEventListener('change', favTutorial);
}
// event handler for the dynamically created select element, which sets
// the value of the related input
let favTutorial = e => {
let select = e.target;
let container = select.closest('.widget-content-wrapper');
container.querySelector('.input-large').value = select.value;
}
// only for this demo, generates content on button click - mocking the
// external process which is updating your DOM
document.querySelector('#test').addEventListener('click', e => {
let widgetClone = document.querySelector('#widget-template').content.cloneNode(true);
widgetContainer.appendChild(widgetClone);
});
})()
<button id="test">Test - dynamically append new widget</button>
<div id="widget-container"></div>
<template id="widget-template">
<div class="widget-content-wrapper">
<div class="arrow"></div>
<form class="input-compressed">
<fieldset>
<legend class="offscreen">Add a Tag</legend>
<div class="editable-field-change">
<span class="input-append input-smaller"><input class="input-large" data-link="proposedTag" placeholder="Add a tag (any text)..." size="16" type="text">
</span>
</div>
<div class="tags">
<ul class="unstyled editable-list inline-list"></ul>
</div>
</fieldset>
</form>
</div>
</template>
<template id="dd-template">
<div class="flex-item">
<select class="ddclass" id="ddid">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
</select>
</div>
</template>
Related
Hey I have the following problem, I want to display two text inputs as a list element but I do not know how to append various variables. The code below only shows the first input in the list.
function addLi () {
let x = document.createElement("LI");
let name= document.createTextNode(document.getElementById("name").value);
let city= document.createTextNode(document.getElementById("city").value);
x.appendChild(name)
document.getElementById("list").appendChild(x);
return false;
}
You could do it this way (just an example with a loop):
document.getElementById('add-btn').addEventListener('click', addLi);
function addLi() {
const items = ['name', 'city'];
for (let item of items) {
const li = document.createElement('li');
const value = document.createTextNode(document.getElementById(item).value);
li.appendChild(value);
document.getElementById("list").appendChild(li);
}
}
<input id="name" value="John Doe"> <input id="city" value="Sydney">
<button id="add-btn">Add to list</button>
<ul id="list"></ul>
I have a dynamic radio option that triggers two different arrays to show in a drop down select.
https://jsfiddle.net/carvingpixel/5mcux28z/3/
<form name="frmRadio" id="radio-buttons" action="">
<input type="radio" id="radio-kits" name="option" onclick="change(this)">Kits
<input type="radio" id="radio-starLabs" name="option" onclick="change(this)">StarLabs
<select id="arrays">
<option id="items"></option>
</select>
</form>
<script>
var kits = ["Lego WeDo", "Force & Motion", "Bernoulli's Lift"];
var starLabs = ["Constellations", "Starfields", "Moon"];
function change(radio) {
if (radio.checked && radio.id === "radio-kits") {
for (var i = 0; i < kits.length; i++) {
document.getElementById("items").innerHTML = kits[i];
}
} else {
for (var i = 0; i < starLabs.length; i++) {
document.getElementById("items").innerHTML = starLabs[i];
}
}
}
</script>
I have most of it working but I am stuck on having each item of the array show in the list. Currently, it's showing the last item in the iteration rather than each item.
Your mistake was to work directly with one <option> when you should have worked with the <select> and multiple <option>.
In the following snippet, I am generating new options for each of the array entry, and then use innerHtml to attach them to the <select>.
const kits = ['Lego WeDo', 'Force & Motion', 'Bernoulli\'s Lift '];
const starLabs = ['Constellations', 'Starfields', 'Moon'];
// Function that is going to change the select options
function fillSelect(values) {
document.getElementById("arrays").innerHTML =
values.reduce((tmp, x) => `${tmp}<option>${x}</option>`, '');
}
function change(radio) {
if (radio.checked && radio.id === 'radio-kits') {
fillSelect(kits);
} else {
fillSelect(starLabs);
}
}
<form name="frmRadio" id="radio-buttons" action="">
<input type="radio" id="radio-kits" name="option" onclick="change(this)">Kits
<input type="radio" id="radio-starLabs" name="option" onclick="change(this)">StarLabs
<select id="arrays">
<option id="items"></option>
</select>
</form>
Each iteration you're replacing the previous value with the current value, so it's normal that the last value is the one being used. Also you need to use the id of the select and not that of the option to add more options...
So you have to do the following :
var kits = ["Lego WeDo", "Force & Motion", "Bernoulli's Lift"];
var starLabs = ["Constellations", "Starfields", "Moon"];
function change(radio) {
document.getElementById("selectList").innerHTML = ""
var select = document.getElementById("selectList")
if (radio.checked && radio.id === "radio-kits") {
for (var i = 0; i < kits.length; i++) {
select.options[select.options.length] = new Option(kits[i]);
}
} else {
for (var i = 0; i < starLabs.length; i++) {
select.options[select.options.length] = new Option(starLabs[i]);
}
}
}
<div id="">
<form name="frmRadio" id="radio-buttons" action="">
<input type="radio" id="radio-kits" name="option" onclick="change(this)">Kits
<input type="radio" id="radio-starLabs" name="option" onclick="change(this)">StarLabs
<select id="selectList">
</select>
</form>
</div>
var node = document.createElement("LI"); // Create a <li> node
var textnode = document.createTextNode("Water"); // Create a text node
node.appendChild(textnode); // Append the text to <li>
document.getElementById("myList").appendChild(node); // Append <li> to <ul> with id="myList"
This should help you
I don't know how to explain it, I don't want it to be unclear, so first thing first, I want to show this HTML code :
<body>
<form class="" action="index.html" method="post">
<input type="num" onkeyup="addOptions()" name="member" id="member">
<div id="selects">
</div>
</form>
</body>
And this is the javascript code :
<script type="text/javascript">
function addOptions() {
document.getElementById('selects').innerHTML = "";
var inputValue = document.getElementById('member').value;
for (var i = 0; i < inputValue; i++) {
var select = document.createElement('select');
var option = document.createElement('option');
option.innerText = "Example";
select.appendChild(option);
document.getElementById('selects').appendChild(select);
}
}
</script>
So, groove of this code will be if I type num in input num, the select will be appear as many as I type the num. But, it just will run the select option. So, my question is can I appear that the option is in HTML code? So when I type the num in the textfield, I will appear something like this for example :
<option value="example" id="example">example</option>
So the option code will be running as many as the num, like when I type 3 in the textfield, I will get 3 code like in above.
If I got it right, there are some issues in your code. I believe you are trying to achieve a drop down using select.
Inside for loop you creating select in each iteration which I think you don't want. To make value, id avilable to the newly created option you have to set those properties to the option.
Try the following:
function addOptions() {
document.getElementById('selects').innerHTML = "";
var select = document.createElement('select');
var inputValue = Number(document.getElementById('member').value);
for (var i = 0; i < inputValue; i++) {
var option = document.createElement('option');
option.innerText = "Example" + i;
option.value = "example" + i;
option.id = "example" + i;
select.append(option);
}
if(select.innerHTML) // if at least one option then append select
document.getElementById('selects').appendChild(select);
}
<input type="num" oninput="addOptions()" name="member" id="member"><br><br>
<div id="selects">
</div>
Just move some lines out of your for loop, as following:
function addOptions() {
document.getElementById('selects').innerHTML = "";
var inputValue = document.getElementById('member').value;
var select = document.createElement('select');
for (var i = 0; i < inputValue; i++) {
var option = document.createElement('option');
option.innerText = "Example "+i;
select.appendChild(option);
}
document.getElementById('selects').appendChild(select);
}
<form class="" action="index.html" method="post">
<input type="num" onkeyup="addOptions()" name="member" id="member">
<div id="selects">
</div>
</form>
how onchange remove and add new elements? i want for each option create new elements and remove other if they exists, https://codepen.io/Datik/pen/Bddmrv
Each option has its own "list" of elements that needs to show on form
for example:
option Standard will show input type='text' only
option VIP will show input and select
Right now, its just create new elements when i choose option, tried checkin for childNodes.length, didn't help
document.addEventListener('DOMContentLoaded',function() {
document.querySelector('select[name="productType"]').onchange=changeEventHandler;},false);
function changeEventHandler(event) {
var getSelect = document.getElementById('product');
var newInput = document.createElement('input');
var newSelect = document.createElement('select');
newInput.setAttribute('type','text');
newInput.setAttribute('placeholder','title');
if(event.target.value=='Standard'){
// if(getSelect.childNodes.length>0){
// getSelect.removeChild(newInput);
// }
getSelect.parentNode.appendChild(newInput);
}
else if(event.target.value=='VIP'){
getSelect.parentNode.appendChild(newInput);
getSelect.parentNode.appendChild(newSelect);
}
else{
getSelect.removeChild(newInput);//tried to delete 1 input if choose 1st option
}
}
You are trying to remove newInput element from getSelect element with this code:
getSelect.removeChild(newInput);
but your input and select are on the same dom level. Try this:
getSelect.parentNode.removeChild(newInput);
You can also symplify your code. Just add container for new fields and it will be easier to manipulate them. Here is working example:
html:
<div class="container">
<fieldset>
<select name="productType" id="product">
<option> </option>
<option>Standard</option>
<option>VIP</option>
</select>
</fieldset>
<div id="fields">
</div>
js:
document.addEventListener('DOMContentLoaded',function() {
document.querySelector('select[name="productType"]').onchange=changeEventHandler;},false);
function changeEventHandler(event) {
//add container for product fields
var fieldsContainer = document.getElementById('fields');
//clean container
fieldsContainer.innerHTML = '';
var newInput = document.createElement('input');
newInput.setAttribute('type','text');
newInput.setAttribute('placeholder','title');
if(event.target.value=='Standard'){
fieldsContainer.appendChild(newInput);
}
else if(event.target.value=='VIP'){
var newSelect = document.createElement('select');
fieldsContainer.appendChild(newInput);
fieldsContainer.appendChild(newSelect);
}
}
I am trying to get just the content/text of div by class name using javascript. The outcome isn't what i have expected. I did try to push it into array but it does not seems to be working. Please help!
What i have done so far :
JavaScript:
var elements = document.body.getElementsByClassName("headline-bar");
window.onload = function() {
var year= document.getElementById("year");
for (i=0;i<elements.length;i++)
{
var Entry = document.createElement("option");
Entry.text = elements[i];
year.add(Entry ,null);
}
}
Html:
<form>
<select id="year">
</select>
</form>
<input type="submit" value="Submit">
<div class="headline-bar">2015</div>
<div class="headline-bar">2014</div>
Output:
Desire outcome:
Use Node.textContent, The Node.textContent property represents the text content of a node and its descendants
var elements = document.body.getElementsByClassName("headline-bar");
window.onload = function() {
var year = document.getElementById("year");
for (i = 0; i < elements.length; i++) {
var Entry = document.createElement("option");
Entry.text = elements[i].textContent;
year.add(Entry, null);
}
}
<form>
<select id="year">
</select>
</form>
<input type="submit" value="Submit">
<div class="headline-bar">2015</div>
<div class="headline-bar">2014</div>