I get an Uncaught TypeError: Cannot read property 'value' of undefined, where undefined is an array, after I perform a function that add/removes a class to an object in that array.
The code:
var tabs = document.getElementsByClassName("et_pb_tab");
var toggles = document.getElementById("tabsacc").getElementsByClassName("et_pb_toggle");
for (var i = 0; i < toggles.length; i++) {
toggles[i].onclick = function() {
var active = document.querySelector(".et_pb_active_content");
active.classList.remove("et_pb_active_content", "et-pb-active-slide");
var num = this.className.slice(-1);
tabs[num].classList.add("et_pb_active_content", "et-pb-active-slide");
};
}
I am basically trying to combine an accordion and tabs on a site that I'm still getting familiar with. The jQuery library is too old to use some current functions and I haven't updated it yet.
Site is: http://www.aberdeenservices.com/ci-data-tabs
I realized that I wrote the code to find the last character of a string of classes, but the tabs module rearranged the order and caused an error. I instead used "search()" to find the index of the class I wanted, added the length, and used "charAt()" to get the number at the end of the class. Thanks guys, the finished code will be at the links below and I've attached my code snippet.
<script>
var tabs = document.getElementsByClassName("et_pb_tab");
var toggles = document.getElementById("tabsacc").getElementsByClassName("et_pb_toggle");
for (var i = 0; i < toggles.length; i++) {
toggles[i].onclick = function() {
var active = document.querySelector(".et_pb_active_content");
active.classList.remove("et_pb_active_content","et-pb-active-slide");
var thisclass = this.className;
var substrclass = thisclass.search("et_pb_accordion_item_");
var num = thisclass.charAt(substrclass + 21);
tabs[num].classList.add("et_pb_active_content","et-pb-active-slide");
};
}
</script>
http://www.aberdeenservices.com/ci-data-tabs
http://www.aberdeenservices.com/ci-data
Related
I am trying to add options to a select drop down list. I am doing this dynamically with js.
When I do this with one select list it works but I need to dynamically add more select list as the user wants to add more sets.
My one list works just fine like this:
<body>
<select class="js-example-basic-single" name="state"></select>
</body>
<script>
$(document).ready(function() {
$('.js-example-basic-single').select2();
});
load_workout_lst({{workout_list | tojson}});
let lst = {{workout_list | tojson}};
let e = document.getElementsByName('state');
console.log(e);
for(var i = 0, l = lst.length; i < l; i++){
var option2 = lst[i];
e[0].options.add(new Option(option2));
}
</script>
I notice when I console.log(e) I get a NodeList. Since I know there is only one item in that list I choose the first one. I access its options and add to it. It works great.
When I add the select menu dynamically I do this:
let exercise = $("#exercise");
var input;
var input = $("<select>").attr("type", "text").attr("name", exerciseName).attr("tabindex", tabIndexNum);
var br = $("<br>");
exercise.append(br);
exercise.append(input);
input.select2();
console.log(input);
for(var i = 0, l = workout_lst.length; i < l; i++){
console.log(workout_lst[i]);
var item = workout_lst[i];
input.options.add(new Option(item));
}
tabIndexNum++;
var workout_lst = [];
function load_workout_lst(lst){
for (let i = 0; i < lst.length; i++){
workout_lst.push(lst[i]);
}
}
Error:
Uncaught TypeError: input.options is undefined
When I console.log(input) here I get an Object. I'm sure that this is my problem I just don't know how to push or add to the Object. Is there a different way I need to be adding to an object? What am I doing wrong here?
I found the official select2 documentation very simple when it comes to managing options. For example, you can use the code snippet below to append and select option. For more details, i have left a reference.
var data = {
id: 1,
text: 'Barn owl'
};
var newOption = new Option(data.text, data.id, true, true);
$('#mySelect2').append(newOption).trigger('change');
Reference:
https://select2.org/programmatic-control/add-select-clear-items
I'm trying to make a runnable console command through Chrome that searches for the word "takeID", and then grabs the content immediately after it between = and & from a div class.
What I have so far doesn't work because I'm very bad at JS so any help would be appreciated. Below is what I have so far:
var iframe=document.getElementsByClassName("activity activity-container-html5");
var searchValue = "takeID";
for(var i=0;i<iframe.length;i++){ if(iframe[i].innerHTML.indexOf(searchValue)>-1){}};
var subString = iframe.substring( iframe.lastIndexOf("=")+1, iframe.lastIndexOf("&"));
console.log(searchValue+"="+subString);
An example of the div class it would be searching would look like:
<div class="activity activity-container-html5" config="{example text;takeID=cd251erwera34a&more example text}">
There are two issues with the code. The first issue is the searchValue posts to the console as whatever is in between the takeID, and not the actual result from searching. The second issue is that the code to search between = and & doesn't work at all and I don't know why. What is wrong with the code?
I just want an output that would post to the log or a popup window saying:
takeID=cd251erwera34a
EDIT:
Something else I thought of was how would you be able to just parse the div and then search for what is in between "takeID=" and "&"? I tried this but I was getting the error "Uncaught TypeError: iframe.lastIndexOf is not a function".
var iframe=document.getElementsByClassName("activity activity-container-html5");
var subString = iframe.substring( iframe.lastIndexOf("takeId=") + 1, iframe.lastIndexOf("&") );
console.log(subString);
I looked this up and I see this is because what it is trying to process is not a string but I'm not sure why that is or how to fix it.
I don't know about you but the best would be to use json directly inside the html tag like this:
<div class="activity activity-container-html5" config="{'example':'text', 'takeID':'cd251erwera34a', 'other':''}">
Or use an array and check manually if the one you are checking is the one you want, like this:
function config(element, searchValue) {
if (element.hasAttribute('config')) {
var configData = JSON.parse(element.getAttribute('config'));
var res = "";
for (var i = 0; i < configData.length; i++) {
if (configData[i].includes(searchValue)) {
res = configData[i];
break;
}
}
return res;
}
}
el = document.getElementsByClassName('activity activity-container-html5');
for (var i = 0; i < el.length; i++) {
console.log(config(el[i], "takeID"));
}
<div class="activity activity-container-html5" config='["example=text", "takeID=cd251erwera34a", "othertext=here"]'>
The array-type (second example) is most likely to work better than the simple json one (first one).
I figured out what I needed to do. Below is working code:
var iframe=document.getElementsByClassName("activity activity-container-html5");
var div = "";
for(var i=0;i < iframe.length; i++){
div += (iframe[i].outerHTML);
}
var take = /takeID=([a-z0-9]*)&/;
var capture = div.match(take);
var matchID = capture[1];
console.log(matchID);
window.alert("takeID=" + matchID);
Essentially what I'm trying to do right now is, given some input text, I split it up by white space and display on a
div id= "animation"
Every time a button is clicked, the array should go forward one word.
This is my current attempt.
function displayText() {
var displayText = document.getElementbyID("animation");
var list = (document.getElementbyID("input").split(/[ \tn]+/);
for (var i = 0; i < list.length; i++) {
displayText.innerHTML = list.get[i];
}
}
Is my thought process somewhat correct? For whatever reason, it doesn't seem to be working.
there are multiple issues in your method
function displayText() {
var displayTextAnimation = document.getElementbyID("animation"); //keep variable name and method name different
var list = (document.getElementbyID("input").value).split(/[ \tn]+/); //use value property and observe extra bracket
for (var i = 0; i < list.length; i++) {
displayTextAnimation.innerHTML = list.charAt(i); //observe replacing get by charAt
}
}
Could anyone please give me an alternate syntax to the following
var id = '-JLxSeCPUCVN13FxifTY';
var ResultsContainer = results[id];
var i=0;
for(var k in ResultsContainer)
{
var TheArrayOfObjectsThatIneed = ResultsContainer[Object.keys(ResultsContainer)[i]];
console.log(TheArrayOfObjectsThatIneed);
//loop the TheArrayOfObjectsThatIneed do the processing
i++;
}
as you see in the image i have an array within an object within an object and i have no idea what the property names are but the structure is always the same {results:{id:{idthatidontknow:[{}]}}} and all i need is to access the arrays
the above code is working nicely but i am new to javescript and i was wondering if there is a nicer syntax and if i am doing it the right way
Perhaps something like this?
var id = '-JLxSeCPUCVN13FxifTY';
var ResultsContainer = results[id];
for(var k in ResultsContainer) {
if (ResultsContainer.hasOwnProperty(k)) {
var TheArrayOfObjectsThatIneed = ResultsContainer[k];
console.log(TheArrayOfObjectsThatIneed);
//loop the TheArrayOfObjectsThatIneed do the processing
}
}
Getting a bit stuck on this, have a got a list of items from an json file. The problem is I want to separate the file in ul li of ten. rather than having a long list of li. I want to separate them into to bootstrap columns of 3 for example col-lg-4, needs to be in javascript and not in query.
This is what I've got so far:
function buildCountryList(countryData) {
var countryName = null;
var countryURL = null;
var countryListContainer = document.getElementById('countryList');
var countryList = document.createElement("ul");
var countryListItem = document.createElement("li");
var countryLink = document.createElement("a");
countryLoaded = true;
for (var i = 0; i < countryData.countryList.length; i++) {
countryName = countryData.countryList[i].country;
countryURL = countryData.countryList[i].url;
countryLink.href = countryURL;
countryLink.innerHTML = countryName;
// countryListItem.appendChild(countryLink);
// countryList.appendChild(countryListItem);
// countryListContainer.appendChild(countryList);
}
}
Notice you need create a new <li> element inside the loop by var. Other wise it's just going to be overwrite each other.
Here is a working demo of what I believe you wanted : http://jsfiddle.net/kP5zX/1/
basicly just fix the error I mentioned and use .className to add bootstrap class names.