We Keep Coding

setAttribute also also setting the value for the following element

I'm pretty sure this one is silly but I can't seem to figure it out myself.
This is a Django website containing a little bit of Javascript.
In my HTML, I have a button that should send a few values to a Javascript function. The javascript function should then find and update some divs in the HTML.
The strange thing is that the value assigned to the setAttribute statement is automatically also used for the following innerHTML statement (overruling whatever was configured there).
HTML Button:
<button class="btn btn-outline-dark" onclick="monthStats(
{{simple_total_monthly_sent_volume}},
{{average_monthly_delivery_rate}},
{{average_monthly_unique_open_rate}},
{{total_monthly_unique_open_volume}},
{{average_monthly_unique_click_rate}},
{{average_monthly_rejection_rate}},
)">Month</button>
Javascript:
function monthStats (sentvolume,
deliveryrate,
uniqueopenrate,
uniqueopenvolume,
uniqueclickrate,
rejectionrate
) {
document.getElementById("sent").innerHTML = (sentvolume).toLocaleString("en-US");
document.getElementById("delivered").innerHTML = deliveryrate+"%";
document.getElementById("uniqueopened").innerHTML = uniqueopenrate+"%";
document.getElementById("uniqueopened").setAttribute("title", uniqueopenvolume.toString());
document.getElementById("uniqueclicked").innerHTML = uniqueclickrate+"%";
document.getElementById("rejected").innerHTML = rejectionrate+"%";
}
HTML divs that should get updated:
<div class="container">
<div class="row">
<div class="col">
<div id="sent" class="keymetric">{{simple_total_monthly_sent_volume|intcomma}}</div><div class="text-muted keymetricexplanation">sent volume</div>
</div>
<div class="col">
<div id="delivered" class="keymetric">{{average_monthly_delivery_rate}}%</div><div class="text-muted keymetricexplanation">delivery rate</div>
</div>
<div class="col">
<div id="uniqueopened" class="keymetric" data-bs-toggle="tooltip" data-bs-placement="top" title="{{total_monthly_unique_open_volume|intcomma}}">{{average_monthly_unique_open_rate}}%</div><div class="text-muted keymetricexplanation">unique open rate</div>
</div>
<div class="col">
<div id="uniqueclicked" class="keymetric">{{average_monthly_unique_click_rate}}%</div><div class="text-muted keymetricexplanation">unique click rate</div>
</div>
<div class="col">
<div id="rejected" class="keymetric">{{average_monthly_rejection_rate}}%</div><div class="text-muted keymetricexplanation">rejection rate</div>
</div>
</div>
</div>
Clicking on the Month button in the HTML results in the title and textvalue of the div with ID "uniqueopened" to be updated correctly by the Javascript. However, the setAttribute statement in the javascript is seemingly also updating the value of the following div with ID "uniqueclicked", overruling the Javascript statement targeting that div.

I'm still not sure what caused the original problem. But could solve my issue by using an alternative approach: instead of pushing all the values to one single javascript function, I created a separate javascript function that does only the setAttribute updates.

Angular access DOM sibling element to alter css class

How do I gain access to the respective sibling element of my button from the ngFor iteration on my collection?
Dom Element, I'm attempting to access this DOM element, so I can alter the sibling element div.popup class. As shown in the Codepen example linked at the bottom of the post.
I'm very new with angular, please advise.
<button
#popBtn
href="#"
id="info"
class="info popup-trigger"
title="info"
(click)="PopUp($event)"
>
Popup
</button>
Prior to the posting here, I read on the following articles but I couldn't understand completely or relate to it.
Pass a reference to DOM object with ng-click
how to get DOM element with ng-click
How to get the element html clicked in a ngFor to add a css class?
Overview of code
Component.html
<section class="ArticlesGrid">
<div *ngFor="let article of articles" class="windowsBox">
<article class="ui-titlebar">
<h4 class="ui-titletext">{{article.title}}</h4>
</article>
<div class="windowsScreen">
<button
#popBtn
href="#"
id="info"
class="info popup-trigger"
title="info"
(click)="PopUp($event)"
>
Popup
</button>
<div class="popup" role="alert">
<div class="popup-container">
Close
<p>{{article.content}}}</p>
</div>
</div>
</div>
<p class="windowsTech">
Technologies:
<span class="THtml"></span>
<span class="TCss"></span>
<span class="TJs"></span>
</p>
</div>
</section>
Component.ts
PopUp(event: Event) {
//console.log(this.viewBtn.nativeElement.nextElementSibling.classList.toggle("is-visible"));
console.log(event);
// this.viewBtn.nativeElement.
}
SandBox Mockup
https://stackblitz.com/edit/angular-collection-popup?file=src/app/app.component.html
Function to mirror
https://codepen.io/Gugiui/pen/vweXYR
Thanks for reading my question. I hope you can advise/guide me

add template reference variable on popup div -
<div class="popup" role="alert" #popupDiv>
pass it in button click function -
(click)="PopUp($event, popupDiv)"
change class in PopUp method using plain javascript -
PopUp(event: Event, element) {
element.classList.remove('popup');
element.classList.add('test');
console.log(element.classList);
}

Message won't display a second time after being closed

User can click the help icon to display a help message. It will close if the user clicks on the close icon in the message. This can be repeated an indefinite amount of time.
This works if both the help icon and the message with the close icon are inside the ng-controller.
However, if the help icon is outside and the message is inside it (see below), then I can display and close the help message, but it won't work if I try to display it a second time.
What am I missing?
<div ui-content-for="title">
<span>Page Title</span>
<span>
<i ng-click="isHelpVisible = true;" class="fa fa-question-circle">
</i>
</span>
</div>
<div ng-controller="InventoryController as inventory">
<div class="scrollable">
<div ng-show="isHelpVisible" class="alert alert-info alert-dismissible">
<a class="close" ng-click="isHelpVisible = false;"
aria-label="close" data-dismiss="alert">×</a>
Help message is here.
</div>
</div>
</div>

This is a data hiding problem caused by the fact that the ng-controller directive creates a child scope.
Instead of setting a scope property directly, set a property of an object on the parent scope.
<div ui-content-for="title">
<span>Page Title</span>
<span><i ng-click="help={isHelpVisible: true}" class="fa fa-question-circle"></i></span>
</div>
<div ng-controller="InventoryController as inventory">
<div class="scrollable">
<div ng-show="help.isHelpVisible" class="alert alert-info alert-dismissible">
<a class="close" ng-click="help.isHelpVisible=false;"
aria-label="close" data-dismiss="alert">×</a>
Help message is here.
</div>
</div>
</div>
Scope inheritance is normally straightfoward... until you need 2-way data binding.
If you try to bind to a primitive (e.g., number, string, boolean) in the parent scope from inside the child scope. It doesn't work the way most people expect it should work. The child scope gets its own property that hides/shadows the parent property of the same name.
Your workaround is to define objects in the parent for your model, then reference a property of that object in the child.
For more information, see
What are the nuances of scope prototypal / prototypical inheritance in AngularJS?

vue.js i used 'v-once' in 'v-for' statement,why can't find 'item'?

<div v-for="item in imControls.messages" >
<p v-once>
<span class="" v-if="item.type==3">{{item.name}}:</span>
<span class="red" v-if="item.type==4">{{item.name}}:</span>
<span class="blue" v-if="item.type==2">{{item.name}}:</span>
<span class="grey" v-if="item.type==1">{{item.name}}:</span>
<span v-html="item.text"></span>
</p>
</div>
imControls.messages exists, if I don't use v-once on p label, it's ok, but if I use v-once, it can't find item.
The error is
'vue.js:2574 [Vue warn]: Property or method "item" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in root instance)
vue.js:2217 Uncaught TypeError: Cannot read property 'type' of undefined'

v-once directive can be used in the v-for directly
<div v-for="item in imControls.messages" v-once>
<span class="" v-if="item.type==3">{{item.name}}:</span>
<span class="red" v-if="item.type==4">{{item.name}}:</span>
<span class="blue" v-if="item.type==2">{{item.name}}:</span>
<span class="grey" v-if="item.type==1">{{item.name}}:</span>
<span v-html="item.text"></span>
</div>

Don't need v-once in v-for statement,because it is fixed in vue.js 2.0.8
4247 fix v-html resetting content even when content string stays the same

Using Bootstrap, I can only get the text to act like a link, not the whole button?

I'm just learning how to use html and css and my teacher has asked us to use Bootstrap. It's really cool, obviously, but when I try to make a button, only the text within the button actually acts like a link as opposed to the whole rectangular button. I'm not sure if I need more than just the minified bootstrap javascript file to make them work or what.
Here's my html, and I also added the line "$('.nav-tabs').button()" to my head as well as the javascript file from bootstrap. Any advice? I know my html is probably pretty janky, my teacher isn't the best at explaining things so I've just been fiddling with things until they seem to work.
<div class="btn-toolbar">
<div class="row-fluid">
<div class="span2 offset2">
<div class="btn btn-primary">
<a href="http://students.cec.wustl.edu/~amd4/Portfolio/portfolio%20-%20profile%20-%20final.html">
Profile
</a>
</div>
</div>
<div class="span2 offset.5">
<div class="btn">
<a href="http://students.cec.wustl.edu/~amd4/Portfolio/portfolio%20-%20writing%20-%20final.html">
Writing
</a>
</div>
</div>
<div class="span2 offset.5">
<div class="btn">
<a href="http://students.cec.wustl.edu/~amd4/Portfolio/portfolio%20-%20music%20-%20final.html">
Music
</a>
</div>
</div>
<div class="span2 offset.5">
<div class="btn">
<a href="http://students.cec.wustl.edu/~amd4/Portfolio/portfolio%20-%20photos%20-%20final.html">
Photography
</a>
</div>
</div>
</div>

remove the class="btn btn-primary" from the div tag, put it on the a tag
see http://twitter.github.com/bootstrap/base-css.html#buttons
...typically you'll want to apply these to only <a> and <button> elements for the best rendering.

Looks like you are not adding the class on the a tag.
You need to use something like this New button This should give you a button with the text New button.
You use Big Button
For a large blue button.