We Keep Coding

Javascript not un-clicking button with link

Newish to javascript, but I do't know why the below is not working. I am trying to use javascript to make a link become active after a button has become clicked.
The user clicks a button that updates the HTML, changes the class and adds a html link. The code works the first time -- the HTML is updated correctly. However if the user decides to un-click the button nothing happens.
Javascript:
function agree() {
let agreement = document.getElementById("agreement");
let agree = document.getElementById("agree");
agree.onclick = () => {
if (agree.value === true) {
agreement.innerHTML = `
<button id="agree" class="agree--no" value="false"></button>I agree
<div class="btn--no-schedule">
<a href="#" > No SCHEDULE </a>
</div> `
} else {
agreement.innerHTML = `
<button id="agree" class="agree--checked" value="true"><i class="fas fa-lg fa-check-square"></i></button>I agree
<div class="btn--agree-schedule">
<a href="http://google.com" > yes SCHEDULE </a>
</div> `
}
}
};
HTML
<div id="agreement">
<button id="agree" class="agree--no" value="false"></button>I agree
<div class="btn--no-schedule">
<a href="#" > SCHEDULE </a>
</div>
</div>
I also tried
<button onclick=“agree();” id="agree" class="agree--no" value="false"></button>
but get a type error agree() is not a function.
Any help would be appreciated

There are two errors here.
First, the click event is lost when you reset the agreement's innerHTML, second, agree.value is a string, and thus will never be "=== true".
There are multiple ways of fixing it. One way is changing the innerHTML part so the event isn't lost. Also, changing the condition to === 'true'
Like so:
HTML:
<div id="agreement">
<button id="agree" class="agree--no" value="false"></button>I agree
<div id="schedule-btn" class="btn--no-schedule">
<a href="#" > SCHEDULE </a>
</div>
</div>
JS:
function agree() {
const agreeBtn = document.getElementById("agree");
const scheduleBtn = document.getElementById("schedule-btn");
agreeBtn.onclick = () => {
if (agreeBtn.value === "true") {
agreeBtn.value = false;
scheduleBtn.innerHTML = `
<div class="btn--no-schedule">
<a href="#" > No SCHEDULE </a>
</div>
`;
} else {
agreeBtn.value = true;
scheduleBtn.innerHTML = `
<div class="btn--agree-schedule">
<a href="http://google.com" > yes SCHEDULE </a>
</div>
`;
}
};
}
Edit: I tried to alter your code as little as possible

Try this code:
function ChangeContent(checkbox) {
var el = document.getElementsByClassName("schedule-agreement")[0];
(checkbox.checked) ? el.innerText = "No SCHEDULE": el.innerText = "Yes SCHEDULE"
}
<div id="agreement">
<input type="checkbox" onchange="ChangeContent(this)"> I agree
<div>
SCHEDULE
</div>
</div>
Explanation:
First of all, add a change event listener to the input checkbox. Then, whenever it is run, check if it is checked. If it is, change the link's innerText to "No SCHEDULE", otherwise, change it to "Yes SCHEDULE".
If you need to use a button, then I would recommend adding a click event listener (or an onclick inline event listener), and changing the link innerText ONLY - not the whole HTML.
In that case, here's a separate demo:
var isChecked = false
function ChangeContent() {
isChecked = !(isChecked)
if (isChecked) {
document.getElementsByClassName("agree")[0].innerText = "✔️ I agree"
document.getElementsByClassName("schedule-agreement")[0].innerText = "No SCHEDULE"
} else {
document.getElementsByClassName("agree")[0].innerText = "❌ I agree"
document.getElementsByClassName("schedule-agreement")[0].innerText = "Yes SCHEDULE"
}
}
<div id="agreement">
<button class="agree" onclick="ChangeContent()">I agree</button>
<div class="btn--no-schedule">
SCHEDULE
</div>
</div>

document.getElementById.onClick doesn't work (Javascript) [duplicate]

This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 6 years ago.
My problems is: I am trying to count all downloads. I do that by adding +1 to my database everytime the button is clicked and then I simply take the database value and display it. I've tried numerous ways but no matter what I do the downloads stay zero. I prefer raw javascript/html because I am not that advanced and I want to do it a way that I understand it.
I've also tried pasting the script in the body and the head but without effect.
<div style="padding: 10px">
<img src="http://localhost:3000/uploads/{{article.imgName}}" width="100%" style="margin-bottom: 15px">
<p>
{{#each article.tags }}
<a class="btn btn-default btn-xs"
href="/tag/{{this}}">{{this}}</a>
{{/each}}
</p>
<small class="author">
{{article.author.fullName}}
</small>
<footer>
<script type="text/javascript">
var article = require("mongoose/lib/model.js");
const downloadCount = function () {
article.downloads += 1;
article.save();
}
document.getElementById('download').onClick = downloadCount;
</script>
<p><br>Views: {{article.views}} </p>
<p>Downloads: {{article.downloads}}</p>
<div class="pull-right">
<a class="btn btn-default btn-sm" href="/">« Back</a>
<a id="download" class="btn btn-default btn-sm" href ="/uploads/{{article.imgName}}" download="{{article.imgName}}" onClick="downloadCount()">Download</a>
{{#if isUserAuthorized}}
<a class="btn btn-success btn-sm"
href="/article/edit/{{article.id}}">Edit</a>
<a class="btn btn-danger btn-sm"
href="/article/delete/{{article.id}}">Delete</a>
{{/if}}
</div>
</footer>
</div>

I don't know which js library you used.
but about handling the on click event in javascript is by using addEventListener function.
document.getElementById('download').addEventListener('click',downloadCount);
Can you specify more about what technologies you used.

My approach will be the following:
1) Wrap your function call with:
// pure JavaScript equivalent to jQuery's $.ready()
// doesn't work in older IEs
document.addEventListener('DOMContentLoaded', function(){
// your code goes here
}, false);
For further support take a look here: http://youmightnotneedjquery.com/#ready
2) Remove the inline handler and use addEventListener
const article = require("mongoose/lib/model.js");
const el = document.getElementById('download');
el.addEventListener('click', downloadCount);
function downloadCount(e) {
e.preventDefault();
article.downloads += 1;
article.save();
}
All together:
<a id="download" class="btn btn-default btn-sm" href ="/uploads/{{article.imgName}}" download="{{article.imgName}}">Download</a>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function(){
const article = require("mongoose/lib/model.js");
const el = document.getElementById('download');
el.addEventListener('click', downloadCount);
function downloadCount(e) {
e.preventDefault();
article.downloads += 1;
article.save();
}
}, false);
</script>

Hide/Show many elements on single click by jQuery

I've code few line of jQuery for Hide/Show many elements on single click and it's working. But problem is; i've many more image class items, so my script going to long, my question is how to simplify or make short my script, i mean any alternatives or any new idea? please suggest.
HTML:
<div id="choose-color">
<span>
<i class="images-red" style="">Red Image</i>
<i class="images-blue" style="display: none;">Blue Image</i>
<i class="images-pink" style="display: none;">Pink Image</i>
<!-- many many images -->
</span>
<button class="red">Red</button>
<button class="blue">Blue</button>
<button class="pink">Pink</button>
</div>
JS: live demo >
$("button.red").click(function(){
$(".images-red").show();
$(".images-blue, .images-pink").hide();
});
$("button.blue").click(function(){
$(".images-red, .images-pink").hide();
$(".images-blue").show();
});
$("button.pink").click(function(){
$(".images-red, .images-blue").hide();
$(".images-pink").show();
});
Please suggest for short and simple code of my script. Thanks.

You can do it by adding just a common class to those buttons,
var iTags = $("#choose-color span i");
$("#choose-color button.button").click(function(){
iTags.hide().eq($(this).index("button.button")).show();
});
The concept behind the code is to bind click event for the buttons by using the common class. Now inside the event handler, hide all the i elements which has been cached already and show the one which has the same index as clicked button.
DEMO
For more details : .eq() and .index(selector)
And if your elements order are not same, both the i and button's. Then you can use the dataset feature of javascript to over come that issue.
var iTags = $("#choose-color span i");
$("#choose-color button.button").click(function(){
iTags.hide().filter(".images-" + this.dataset.class).show()
});
For implementing this you have to add data attribute to your buttons like,
<button data-class="red" class="button red">Red</button>
DEMO

This works
$("#choose-color button").click(function(){
var _class = $(this).attr('class');
$("#choose-color i").hide();
$(".images-"+_class).show();
});
https://jsfiddle.net/455k1hhh/5/

I know this might not be the prettiest solution, but it should do the job.
$("button").click(function(){
var classname = $(this).attr('class');
$("#choose-color span i").hide();
$(".images-"+classname).show();
});

You're making future extensibility a little difficult this way due to relying on class names but this would solve your immediate need:
<div id="myImages">
<i class="images-red" style="">Red Image</i>
<i class="images-blue" style="display: none;">Blue Image</i>
<i class="images-pink" style="display: none;">Pink Image</i>
<!-- Many many image -->
</div>
<div id="myButtons">
<button class="red">Red</button>
<button class="blue">Blue</button>
<button class="pink">Pink</button>
</div>
$("#myButtons button").click(function(){
var color = $(this).attr("class");
var imageClass = ".images-"+color;
$('#myImages').children("i").each(function () {
$(this).hide();
});
$(imageClass).show();
});
Here's a JSFiddle
Edit: Note how I wrapped the buttons and images in parent divs to allow you to isolate just the buttons/images you want to work with.

You can do the following using data-* attributes, because when you have more elements of the same color, using index of the button won't work. And simply using the whole class attribute won't work if you have to add more classes to the button in future.
$("button").click(function() {
var color = $(this).data('color');
var targets = $('.images-' + color);
targets.show();
$("span i").not(targets).hide();
});
.hidden {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br/>
<br/>
<div id="choose-color">
<span>
<i class="images-red">Red Image</i>
<i class="images-blue hidden">Blue Image</i>
<i class="images-pink hidden">Pink Image</i>
<!-- Many many image -->
</span>
<br/>
<br/>
<button data-color="red">Red</button>
<button data-color="blue">Blue</button>
<button data-color="pink">Pink</button>
</div>

It would make sense to have all images share a single class (.image for example). Then you just use a shared class for the button and the image; in this example I used the color name. Now, when any button is clicked, you can grab the class name of the image you want to show.
Give this a try:
$("button").click(function(){
$(".image").hide();
var className = $(this).attr("class");
$("." + className).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br/><br/>
<div id="choose-color">
<span>
<i class="image red" style="">Red Image</i>
<i class="image blue" style="display: none;">Blue Image</i>
<i class="image pink" style="display: none;">Pink Image</i>
<!-- Many many image -->
</span>
<br/><br/>
<button class="red">Red</button>
<button class="blue">Blue</button>
<button class="pink">Pink</button>
</div>

You may try this:
<div id="choose-color">
<span>
<i class="images-red" style="">Red Image</i>
<i class="images-blue" style="display: none;">Blue Image</i>
<i class="images-pink" style="display: none;">Pink Image</i>
<!-- Many image -->
</span>
<br/><br/>
<button class="colour red" onclick="myFunction(this)">Red</button>
<button class="colour blue" onclick="myFunction(this)">Blue</button>
<button class="colour pink" onclick="myFunction(this)">Pink</button>
</div>
JS: see here
$(".colour").click(function(){
var colors = ["red", "blue", "pink"];
for (i = 0; i < colors.length; i++) {
if($(this).hasClass(colors[i])){
$(".images-"+colors[i]).show();
}else{
$(".images-"+colors[i]).hide();
}
}
});

getElementById with multiple buttons

I'm struggling to get my links to enable their respective buttons. For instance the first link should enable the first button and the second should enable button 2.
Can anyone help?
Link 1
Link 2
<button disabled class="btn btn-primary pull-left" id="butt1">Button 1</button>
<button disabled class="btn btn-primary pull-left" id="butt2">Button 2</button>

Your problem is your use of quotation marks. There are two options:
Use single quotes
Use " or \22 instead of your double quotes
Explanation
Your onclick is wrapped in double quotes. As soon as you use a double quote, it's the end of the onclick.
Solution
Link 1
Link 2
Demonstration
See this fiddle (Thanks #JamesThorpe for updating the escaped quote option)
Note, I removed the href because it doesn't make sense to link somewhere if you're going to do something on the current page.

removeAttribute(:attribute) can do the trick as well.
Link 1
<button disabled class="btn btn-primary pull-left" id="butt1">Button 1</button>

Just change the quatation marks for the id from double to single ones:
document.getElementById('butt1').disabled=false;
If the anchor is just for the activation, add an return false at the end:
document.getElementById('butt1').disabled=false; return false;

Change the "butt*" with 'butt*' , otherwise the browser read this
onclick="document.getElementById("
and edit the href="link" with href="#" (this is not mandatory, but the question as it is now is a little strange)
Link 1
Link 2
<button disabled class="btn btn-primary pull-left" id="butt1">Button 1</button>
<button disabled class="btn btn-primary pull-left" id="butt2">Button 2</button>

you problem in this string
"document.getElementById("butt1").disabled=false"
it should be
"document.getElementById('butt1').disabled=false"
Fiddle here

With a bit more work you start enabling a bit more elements, or add functionality that you could expand on easier in the future.
As a simple example, i added a small javascript file where you could set the elements that upon click activate/deactivate the other elements.
Currently i am preventing the default action, so you wouldn't be navigating towards the link you are actually setting, but that is entirely up to you ;)
;(function (ns) {
var actionElements = {
l1: ['butt1'],
l2: ['butt2']
};
function bootstrap() {
var prop, value, element;
for (prop in actionElements) {
if (actionElements.hasOwnProperty(prop)) {
element = document.getElementById(prop);
value = actionElements[prop];
if (element) {
element.addEventListener('click', function(e) {
if (typeof e === 'undefined') {
var e = window.event;
}
e.preventDefault();
for (var i = 0; i < this.length; i++) {
var el = document.getElementById(this[i]);
el.disabled = false;
}
return false;
}.bind(value));
}
}
}
}
ns.addEventListener('load', bootstrap);
}(window));
Link 1
Link 2
<button disabled class="btn btn-primary pull-left" id="butt1">Button 1</button>
<button disabled class="btn btn-primary pull-left" id="butt2">Button 2</button>

Why this Javascript DOM method doesn't work?

Basically, I'm trying to create a dynamic list, that allows the user to add list/remove list items.
The problem is for some reason
1) 'createTextNode' in this variable doesn't work.
2)
document.getElementById("myList").appendChild(list ).appendChild(inList);
works, while
var listContainer = document.getElementById("myList").appendChild(list ).appendChild(inList);
listCotnainer.appendChild(list).appendChild(inList);
DOES NOT!!
Any help would be appreciated. Thanks!!
Also, would appreciate if you could direct me to a readily written code for the dynamic list, it'll save me a great deal of time. Thanks!
function addItem(txt) {
var list = document.createElement("li");
var listAtr = list.setAttribute("class", "list-group-item");
listAtr.createTextNode(txt);
var inList = document.createElement("button");
var inListAtr = inList.setAttribute("class", "btn btn-default glyphicon glyphicon-minus");
document.getElementById("myList").appendChild(list ).appendChild(inList);
//listCotnainer.appendChild(listAtr);
}
function removeItems() {
}
function removeItem() {
}
<section>
<div ng-controller="addElements">
<h3>{{subtitle}}</h3>
<button class="btn btn-default glyphicon glyphicon-plus" onclick="addItem('This is a test text')"></button>
<button class="btn btn-default glyphicon glyphicon-minus" onclick="removeItems()"></button>
<ul class="list-group" id="myList">
<!-- dynamically generate list items here -->
</ul>
</div>
</section>

Your variable listContainer is wrong. It should be:
var listContainer = document.getElementById("myList");
listCotnainer.appendChild(list).appendChild(inList);