We Keep Coding

which/how to properly use a loop for html change with Javascript?

I am new in Javascript and trying to change the HTML content of a line.
I've been helped a little by a friend who made this code for me, but I'm running into major issues.
The situation is:
I'm creating a FAQ in SharePoint 2013, and this code is supposed to read a list, read 3 informations (Category, Question and Answer) and then substitute the HTML where I want it to.
The issue is that it is running on every '.cd-faq__trigger' that is inside it's "i.category", changing them all to the same "i.question"
function ChangeHTML(){
var items = GetListItems("X", "Y", "Z")
items.forEach(function(i){
$('#'+i.category+' .cd-faq__trigger').html(i.question)
});
}
}
-----------------HTML ------------------
<div class="cd-faq__items">
<ul id="Compras_TI" class="cd-faq__group">
<li class="cd-faq__title"><h2>Compras TI</h2></li>
<li class="cd-faq__item">
<a id="trigger" class="cd-faq__trigger" href="#0"><span id="texto"></span></a>
</li>
</ul>
</div>

Finally figured out how to do it... Made the script write the whole HTML from scratch and then no need to substitute nothing.
SCRIPT:
function AddCategory(){
var items = GetListItems("ListID", "caml", "url")
items.forEach(function(i){
$('#'+i.Categoria).append('<li class="cd-faq__item"><a id="trigger" class="cd-faq__trigger trigger" href="#0"><span>'+i.Pergunta+'</span></a><div class="cd-faq__content"><div class="text-component"><p>'+i.Resposta+'</p></div></div></li>')
});
}
'i.Categoria' = each category from the list.
'i.Pergunta' = each question posted on the list.
'i.Resposta' = each answer posted on the list.
HTML:
<div class="cd-faq__items">
<ul id="Compras_TI" class="cd-faq__group">
<li class="cd-faq__title"><h2>Compras TI</h2></li>
</ul> <!-- cd-faq__group -->
</div>
So it looks for the Category of the post, and inside of it it appends the HTML adding in it the question and answer posted.
Thank you for who helped!

AppleScript cannot click input tag to add file

I am trying to use applescript to add a file to a website's input field.
This is my code so far:
set ClickInput to "var myInput = document.getElementByClassName('jsx-1828163283 upload-btn-input')[0]; myInput.dispatchEvent(new MouseEvent('mousedown')); myInput.dispatchEvent(new MouseEvent('mouseup'));"
set ClickInput2 to "var myInput = document.getElementsByName('upload-btn')[0]; myInput.dispatchEvent(new MouseEvent('mousedown')); myInput.dispatchEvent(new MouseEvent('mouseup'));"
activate application "Safari"
tell application "Safari"
open location "https://www.example.com/upload"
set theTab to tab 1 of window 1
-- wait until page loads
repeat while document 1's source = ""
delay 0.5
end repeat
-- do JavaScript ClickInput in theTab
do JavaScript ClickInput2 in theTab
delay(5)
close theTab
end tell
Here is the HTML around the input element I want to select:
<div class="jsx-3758851661 upload">
<div class="jsx-1828163283 upload-btn">
<div class="jsx-3758851661 card stage-1">
<div class="jsx-3758851661 text-main">Select video to upload</div>
<div class="jsx-3758851661 text-sub text-sub-margin">Or drag and drop a file</div>
<br class="jsx-3758851661">
<ul class="jsx-3758851661 text-sub">
<li class="jsx-3758851661">MP4 or WebM</li>
<li class="jsx-3758851661">720x1280 resolution or higher</li>
<li class="jsx-3758851661">Up to 60 seconds</li>
</ul>
</div>
<input type="file" name="upload-btn" accept="video/mp4,video/x-m4v,video/*" class="jsx-1828163283 upload-btn-input">
</div>
</div>
The way the site works is you click the outermost div <div class="jsx-3758851661 upload"> and the safari file finder pops up and you select what file you want.
I have tried clicking the divs outside of the input tag and I have tried clicking the input tag by itself.
I tried to do this by selecting the classnames of the divs and the input tag
I also tried to do this by selecting the input tag by its name and clicking on that
None of these worked.
Im not sure if it clicked but none of these made the file finder pop up
Do you guys have any ideas? Let me know if you would like some clarification. thanks!

figured out set ClickInput to "document.getElementsByName('upload-btn')[0].click();" works !

getElementsByName isn’t a function that I’m aware exists as standard, so you probably want to use getElementsByClassName or querySelector.
The input element has two class names, of which I’m going to choose ”upload-btn-input” in my example below:
tell application id "com.apple.safari"
open location "https://www.example.com/upload"
tell document 1
repeat while the source = ""
delay 0.5
end repeat
do javascript "document.querySelector('.upload-btn-input').click();"
end tell
end tell
If you can provide the actual URL of the page in question, this would allow me to refine this answer to ensure it’s appropriate for what you’re trying to do.

JQuery Get Value of Embedded Widget Autocomplete Text

I have embedded a widget into my site provided by a third party site, this widget displays an input box that auto-suggests text to the user on input.
It's the same as the Ask Your Question search on this page.
I embed the widget by including a widget.js file in my document <head>, and calling it in my html with;
<div id="widget-5032"></div>
When I inspect the HTML of the widget I see the following (sample item list);
<div>
<ul id="search-query-5032_list">
<li data-question="Alaska">Alaska</li>
<li data-question="Hawaii">Hawaii</li>
<li data-question="etc.">etc.</li>
</ul>
</div>
The auto-suggestions are being served from the third party website, when one is clicked, the input is populated with the suggested text and the page automatically redirects to the external website (no need to click the search button). I have no control over how the widget functions.
I'm trying to capture the value of the selected text but I'm not sure how to?
The reason I want to do this is so I can send it to Google Tag Manager using dataLayer.push({})
I've tried this but it doesn't work;
$('#search-query-5032_list li').on('click', function() {
alert($(this).text());
});
Any advice is appreciated.

I had a quick look at the code on the page and I think you can use this piece of code on your page. The Try/Catch is important as the hidden input is only created when an item is selected.
springSpace.la.widget_5032_inst.search.autocomplete.input.parentNode.addEventListener('click', function(){
try {
alert(searchform_5032.form.querySelector('input[name=faqid]').value);
}
catch(err) {
console.log("empty");
}
});
Where I have the "alert" message, you would replace with your GTM dataLayer push to get that information into GTM/GA.

Can you try this:
$('#search-query-5032_list').on('click', 'li', function(){
alert($(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-group">
<ul id="search-query-5032_list">
<li data-question="Alaska">Alaska</li>
<li data-question="Hawaii">Hawaii</li>
<li data-question="etc.">etc.</li>
</ul>
</div>

click on hyperlinks in unit testing using protactor in angularjs

I am new in unit testing in angularjs. I read the tutorial from:
https://github.com/angular/protractor/blob/master/docs/tutorial.md.
I want to click on hyperlink but i dont know how can i achieve this.
Here is my code:
<li ng-repeat="menu in sidebarLinks" ng-if="menu.visible == true " ng-class="{active: isActive('/{{menu.action}}')}">
<a ng-href="#/{{menu.action}}" title="{{menu.name}}" ng-click="loadSubmenus(menu.action)" ng-class="{active: isActive('/{{menu.action}}')}">
<div class="icon {{menu.icon}}" ng-class="{active: isActive('/{{menu.action}}')}"></div>
<span>{{menu.name}} </span>
</a>
</li>
In unit testing:
describe('Protractor Demo App', function() {
browser.driver.get('https://localhost:8443/login.html');
browser.driver.findElement(by.id('name')).sendKeys('test');
browser.driver.findElement(by.id('password')).sendKeys('test');
browser.driver.findElement(by.id('login')).click();
});
After login url is https://localhost:8443/#/dash
After click on link url should be https://localhost:8443/#/hypera

Since your links won't work for anyone else because you're running it locally on your machine, I can only tell you the best way to do it.
If you're dealing with hyperlinks, you need to get the element that you've set with 'login'. I'm not seeing it in your HTML snippet so I can't give you the correct path.
If it was a basic hyperlink, you could find it easily by using something like:
element(by.linkText('login')).click()
If your login button's text is indeed 'login'. If it is something else, like a button, you'll need to find the exact element and it will look like:
element(by.css('span[class="login"]')).click()
If your login button is under a 'span' tag in your HTML page.

Dynamic Content with Ajax Using a Dropdown Menu

what I am trying to do is have a specific div from another page being loaded into a div when you click on a dropdown menu.
Here is my dropdown menu code and the div #location-info is where I want the info pulled into.
<div class="nav-location">
<ul>
<li class="locationhead">Select Locations
<ul id="location-options">
<li>Atikokan</li>
<li>Dryden</li>
<li>Emo</li>
<li>Fort Frances</li>
<li>Rainy River</li>
<li>Red Lake</li>
<li>Sioux Lookout</li>
<li>Thunder Bay</li>
</ul>
</li>
</ul>
</div>
<div id="location-info"></div>
Now here is the script I have in the footer of my site to try to pull in the content from the a href of each of the items in that dropdown...
$('#location-options').on('click', 'a', function (event) {
$el = $(event.target);
$.ajax({
type: 'GET',
url: $el.attr('href'),
success: function (html) {
$('#location-info').html(html);
}
});
return false;
});
I would think that this would pull in the info from the div location-info from each of the other pages in the dropdown when you click so the info changes and you get the location info for example, this is the page at modocom.ca/gillons/emo which I want to pull in the info from the location-div
<div id="location-info">
<div class="sevencol">
<h4>Gillons | Emo</h4><p>74 Front St<br />Emo, ON P0W 1E0</p>
<p>Phone: (807) 482-2146<br />Fax: (807) 482-2757</p>
</div>
<div class="fivecol last">
<h4>Office Hours</h4><p>Monday-Friday<br />8:30am - 5:00pm</p>
</div>
</div>
So that HTML above is what I would be trying to pull into the location-info div when someone clicks on Emo and then so on it would change when you select different location from the Dropdown.
I am using Wordpress but this stuff is all hardcoded in.
Struggling with this one hopefully someone can lend a helping hand, can seem to wrap my head around it.

I think that your problem is that in line $('#location-info').html(html); you're pulling entire site content from selected link, and stuffing it into your <div>.
Instead you should take only <div id="location-info"> from html variable.
Also normal behaviour of click is not being prevented here - it simply follows the link. Also $el.attr('href') will not return a string with link, but an empty object, check for yourself.
EDIT:
I was able to bind the 'click' event to each link, so instead of following the link, it simply displays href in your div, and then makes ajax request.
This is my JSFiddle example:
http://jsfiddle.net/mUThR/51/
Ajax request fails, but in console i can see that it's due to Proxy 407 error, access denied; but it should work from your machine. If it does, you still need to extract proper div from returned html.
Cheers.