We Keep Coding

onclick not working for two or more links for same function in javascript

I have displayed records from MySQL database. After displaying records added javascript onclick function. It works only for the first record and not works for other records.
In the above image, I clicked the first link which works fine. But if I click second click nothing happens.
<script>
function Confirm(title, msg, $true, $false, $link) {
/*change*/
var $content =
"<div class='dialog-ovelay'>" +
"<div class='dialog'><header>" +
" <h3> " +
title +
" </h3> " +
"<i class='fa fa-close'></i>" +
"</header>" +
"<div class='dialog-msg'>" +
" <p> " +
msg +
" </p> " +
"</div>" +
"<footer>" +
"<div class='controls' style='text-align:right'>" +
" <button class='button button-danger doAction'>" +
$true +
"</button> " +
" <button class='button button-default cancelAction'>" +
$false +
"</button> " +
"</div>" +
"</footer>" +
"</div>" +
"</div>";
$("body").prepend($content);
$(".doAction").click(function() {
$(this)
.parents(".dialog-ovelay")
.fadeOut(500, function() {
var subtotal = document.getElementById("subtotal").innerHTML;
var price = "<?php echo $price ;?>";
var subtotal = +subtotal + +price;
var totalitems = document.getElementById("totalitems").innerHTML;
var totalitems = +totalitems + +1;
document.getElementById("totalitems").innerHTML = totalitems;
document.getElementById("subtotal").innerHTML = subtotal.toFixed(2);
var total = +subtotal + +8 + +4;
document.getElementById("total").innerHTML = total.toFixed(2);
$(this).remove();
});
});
$(".cancelAction, .fa-close").click(function() {
$(this)
.parents(".dialog-ovelay")
.fadeOut(500, function() {
$(this).remove();
});
});
}
$("#linkdup").click(function() {
Confirm(
"Are you sure you want to Duplicate Frame",
"One more frame will be added to Cart",
"Yes",
"No"
); /*change*/
});
</script>

You are working with IDs here. An ID is unique, if you query it, you will get one result (the first).
Example:
// This selects one
const result = document.getElementById('myId').innerHTML;
console.log(result);
// This selects all
const elements = document.querySelectorAll('[id=myId]');
elements.forEach(function(element) {
console.log(element.innerHTML);
// add click event to element here
});
<div id="myId">Test 1</div>
<div id="myId">Test 2</div>
Use classes for this. Using an ID multiple times is invalid, even though you can make it work as shown in example.

Creating a list of students and assigning a function to each button

I am trying to allow clients to create a list of students then view more info by simply clicking on the button with the students name. I've got it to create the button and display the students name in the button but it only calls the function when I click submit to add the student to the list, the actual student button doesn't seem to function.
function updateStudentList() {
var html = "";
for (var i = 0; i < students.length; i++) {
html += "<li><button type='button' class='studentButton'" + "id=" + students[i].name +">" + students[i].name + "</button></li>";
}
$('#studentList').html(html);
for (var i = 0; i < students.length; i++) {
document.getElementById(students[i].name).addEventListener('click', openStudentInfo(students[i].name));
}
}
function openStudentInfo(studentName) {
console.log("Opening " + studentName + " info.");
var studentInfo = requestStudentByName(studentName);
if (studentInfo != null) {
var studentInfoForm = $("#studentInfoForm");
var html = "";
html += "<h3>Student Name: " + studentInfo.name + "</h3>";
html += "<h3>Student ID: " + studentInfo.studentID + "</h3>";
studentInfoForm.html(html);
$("#studentInfoModal").show();
}
}
HTML:
<ul data-role="listview" id="studentList"> </ul>
Note: I can't use the onclick tag in HTML, it causes security issues. Cordova also blocks this.

The way you binding the event is not ok. Try binding this way:
$(document).ready(function() {
$("#studentList").on("click", ".studentButton", function() {
var studentId = $(this).data("studentid");
openStudentInfo(studentId);
});
});
And in your HTML generation:
html += "<li><button type='button' class='studentButton' data-studentid='" + students[i].studentID +"'>" + students[i].name + "</button></li>";
This kind of event delagation works not metter how you create the elements inside the root element(studentList in this case), because the event was bound in it, and not on the dynamic elements.

no jquery version of DontVoteMeDown's answer
document.getElementById('studentList').addEventListener('click', function(event) {
var clickedEl = event.target;
if(clickedEl.className === 'studentButton') {
var studentId = clickedEl.dataset.studentId;
openStudentInfo(studentId);
}
});

How to add additional functionalities?

I got a simple JavaScript based blog . First have a look at the below codes and I will ask my question.
Index.html have the following codes in its body
<script language="javascript" type="text/javascript" src="blog/config.js"> </script>
<script language="javascript" type="text/javascript" src="blog/single.js"> </script>
<script language="javascript" type="text/javascript" src="blog/posts.js"> </script>
config.js has
//This is the configuration file of the blog system.
//change these variables to suit your style and needs
var head = "h2"; //the heading style, ex. h1, h2, ect. use "h2" rather than "<h2>"
var text = "text"; //the text style, from your style sheet, it's in a <div> tag
var divider = "<hr>"; //the division between posts
var newer = "newer"; //the class for the link to the next newest page
var older = "older"; //the class for the link to the next oldest page
var pageclass = "page"; //the class for the text that displays the page number
var dateclass = "date"; //the class for the date
var pagesize = 4; //the number of posts on each page
var navclass = nav; //the configuration for the navigation`
posts.js
var posts = 1; //add 1 to this after adding a post. should be equal to the id of the newest post.
initblog(posts);
var id = 1; //make sure that this number is one greater than the one below it
var date = "mm/dd/yyyy"; //The date of the post
var heading = "Post 1"; //The title
var entry = ""; //reset the string
//don't worry about formatting and stuff like that, the system takes care of it all for us.
//VV your entry VV
entry += "<p>Wow, this post is on another page, If you have this many real posts, congratulations!</p>";
//^^ The most important part ^^
add_entry(id,date,heading,entry); //adds the entry to the blog
single.js
var maxpost;
function initblog(posts){
maxpost = posts;
var address = window.location.search;
if (address.substring(0, 1) == '?') {
page = address.substring(1);
} else{
window.location = "post.html?" + posts;
}
page = parseInt(page);
if (page > maxpost){
page = maxpost;
}
if (page < 1){
page = 1;
}
}
function add_entry(id,date,heading,entry) {
for (i=page;i>page - 1;i--){
if (id == i){
var entrytext = "";
entrytext += "<div class=" + text + ">";
entrytext += "<" + head + ">";
entrytext += "<a name=" + id + "></a>";
entrytext += "<span class='date'>[" + date + "]</span> ";
entrytext += heading;
entrytext += "</" + head + ">";
entrytext += entry;
entrytext += "</div>" + divider;
document.write(entrytext);
}
}
}
function pages(){
entrytext = ""
entrytext += "<table class=\"nav\"><tr>";
entrytext += "<td width=25% class = " + newer + ">&nbsp";
if (page < maxpost){
entrytext += "<A HREF=javascript:prev()>Newer Posts </A>";
}
entrytext += "</td><td width=50% class = " + pageclass + "><br><A HREF=javascript:newest()> Back to Index</A></td>";
entrytext += "<td width=25% class = " + older + ">&nbsp";
if (page-1 > 0){
entrytext += "<A HREF=javascript:next()>Older Posts</A>";
}
entrytext += "</td></table>";
entrytext += "";
document.write(entrytext);
}
function next(){
page = page - 1;
if (page < 1) {
page = page + 1;
}
window.location = "post.html?" + page;
}
function prev(){
page = page + 1;
if (page > maxpost) {
page = maxpost;
}
window.location = "post.html?" + page;
}
function newest(){
window.location = "index.html?" + maxpost;
}
Well , this is the whole blog script . I ain't added styles and you may see the comments on each lines for simplicity.
This blog doesn't have options to add title and meta description , keyword etc. Due to the style of applying it can do nothing outside the body tag.
1 . How to add an option to take/load titles?
2 . How to add the feature to load meta tag?
Don't tell me to edit and add titles on the template (index.HTML) , because that make no sense

As you see the heading block is for the title of the blog. All you need is just making it more visible.
var entrytext = "";
entrytext += "<div class=" + text + ">";
entrytext += "<h1>" + heading + "</h1>";
entrytext += "<" + head + ">";
entrytext += "<a name=" + id + "></a>";
entrytext += "<span class='date'>[" + date + "]</span> ";
entrytext += "</" + head + ">";
entrytext += entry;
entrytext += "</div>" + divider;
document.write(entrytext);
document.title = heading;
This will solve your problem about titles.
Regarding to meta tags, usually (actually by standard) meta tags are written betweeen <head> tags in HTML. To make it SEO compilant you need add them into these tags. More detailed: http://www.w3schools.com/tags/tag_meta.asp
But, if this code is generated on client-side. There is no meaning to generate it, because search engine will not parse on-fly generated meta tags. Because it's executed on browser.

How to move up/down div on one place use onclick in jquery

This is my first post so I asked for help and possible comments.
I would like to do change div (which is added by using the tool: AddR) by one position up and down when I click "onclick" with jQuery function.
I wrote something like that but it did not work ..
Could someone help me what should I improve?
Thanks for your help
<script>
function AddR(k) {
Radio_L = Radio_L + 1;
Radio_N = "Radio" + Radio_L;
$("#" + k.id + "").append("<div id='"+Radio_N+"'>" + Radio_N + "<br /><br />" +
"<button type='submit' class='button' style='float: left;' onclick='AddR(" + Radio_N + ");' >Add</button>" +
"<button type='submit' class='button' style='float: left;' onclick='UpR(" + Radio_N + ");' >Up</button>" +
"<button type='submit' class='button' style='float: left;' onclick='DownR(" + Radio_N + ");' >Down</button><br />" +
"<br />" + "<input type='text'>" + "<br /><br />" + '</div>'
);
}
function UpR(k) {
var pos = (this).index();
var parent = $("#" + k.id + "");
parent.insertAfter(pos.next());
}
function DownR(k) {
var pos = (this).index();
var parent = $("#" + k.id + "");
parent.insertBefore((pos.next());
}
</script>

I would offer a solution which simplifies the HTML, does not put in hard coded HTML in the code and uses classes rather than a lot of code embedded in the markup.
With this markup to start:
<div id='Radio_N0' class='container'><span class='containerName'>Radio_N 0</span>
<br/>
<button type='submit' class='button add'>Add</button>
<button type='submit' class='button up'>Up</button>
<button type='submit' class='button down'>Down</button>
<br/>
<input type='text' />
<br />
</div>
You could use this code to create more of these and move them around:
function AddR(k) {
Radio_L = $('.container').length;
var Radio_N = "Radio_N" + Radio_L;
var newDiv = k.parents('.container').clone();
newDiv.attr('id', Radio_N).find('.containerName').text(Radio_N);
newDiv.insertAfter(k.parents('.container'));
}
function UpR(k) {
var parent = k.parents('.container');
var pos = parent.prev();
parent.insertBefore(pos);
}
function DownR(k) {
var parent = k.parents('.container');
var pos = parent.next();
parent.insertAfter(pos);
}
$(document).on('click', '.add', function () {
AddR($(this));
});
$(document).on('click', '.up', function () {
UpR($(this));
});
$(document).on('click', '.down', function () {
DownR($(this));
});
See it in action here: http://jsfiddle.net/uka2C/

var pos = (this).index();
^---- Missing $ sign
supposed to be
var pos = $(this).index();
Also
pos with give you an number and they do not have the next method. Only jQuery objects do
Try this
function UpR(k) {
var $elem = $(this).next();
var parent = $("#" + k.id + "");
parent.insertAfter($elem);
}

Try this code (also here: http://cdpn.io/AjHyE), i've found some syntax errors:
<script>
var Kon_L = 0;
function Kon() {
Kon_L = Kon_L+ 1;
var Kon_R_N = "Kon" + Kon_L;
$("<div id='" + Kon_R_N + "' class='ka' > " + "Kon " + Kon_L +
"<button type='submit' class='button' style='float: left;' onclick='UpR(\"" + Kon_R_N + "\");' >UpDIV</button>" +
"<button type='submit' class='button' style='float: left;' onclick='DownR(\"" + Kon_R_N + "\");' >DownDIV</button>" +
"<br />Tekst<br />" +
"</div>").appendTo(".Place");
}
function UpR(k) {
var self = $("#"+k);
var prev = self.prev();
self.insertBefore(prev);
}
function DownR(k) {
var self = $("#"+k);
var next = self.next();
self.insertAfter(next);
}
</script>
Also check your browser console to see if it's working.
Anyway, since you are asking for comments i'd recommend something to you:
remove the HTML from your JS code. You could reference the buttons with some jQuery selector and move them around
remove the inline style from HTML, you can easily move the float property inside the button class
decouple the JS from the HTML even more, don't use the onclick in the HTML but use the jQuery click() function with the selectors
If you try these modifications i think that you could get more feedback from the Stack Overflow community.

How to dynamically assign an id to an image

var intFields = 0;
var maxFields = 10;
function addElement() {
"use strict";
var i, intVal, contentID, newTBDiv, message = null;
intVal = document.getElementById('add').value;
contentID = document.getElementById('content');
message = document.getElementById('message');
if (intFields !== 0) {
for (i = 1; i <= intFields; i++) {
contentID.removeChild(document.getElementById('strText' + i));
}
intFields = 0;
}
if (intVal <= maxFields) {
for (i = 1; i <= intVal; i++) {
intFields = i;
newTBDiv = document.createElement('div');
newTBDiv.setAttribute('id', 'strText' + intFields);
newTBDiv.innerHTML = "<input placeholder='recipient" + intFields + "#email.com' type='text' name='" + intFields + "'/><a href='javascript:removeElement();'><img id='strImg + " + intFields + "' src='images/minus.png' alt='Add A Field'/></a><input type='text' value='" + newTBDiv.id + "'/>";
contentID.appendChild(newTBDiv);
message.innerHTML = "Successfully added " + intFields + " fields.";
}
} else {
for (i = 1; i <= maxFields; i++) {
intFields = i;
newTBDiv = document.createElement('div');
newTBDiv.setAttribute('id', 'strText' + intFields);
newTBDiv.innerHTML = "<input placeholder='recipient" + intFields + "#email.com' type='text' name='" + intFields + "'/><a href='javascript:removeElement();'><img id='strImg + " + intFields + "' src='images/minus.png' alt='Add A Field'/></a><input type='text' value='" + newTBDiv.id + "'/>";
contentID.appendChild(newTBDiv);
message.innerHTML = "Unable to create more than 10 receipient fields!";
}
}
}
My script here dynamically adds up to 10 fields where users will be able to enter an email address and to the right of the text box i add an image of a minus sign that calls another script. I'm having trouble working out how to assign and keep track of the minus signs. I need to be able to have the minus sign script's recognize the text box it is by and remove it. I can write the remove script easily enough but I'm unsure of how to tell the image which text box to remove. Any help, suggestions, or comments are greatly appreciated.
Thanks,
Nick S.

You can add a class to the field called minus and then check through like that. I would suggest using jquery for this.
To add the class
$("#element").addClass("minus");
To remove all elements with that class
$("body input").each(function (i) {
if($(this).attr("class") == "minus"){
$(this).remove();
}
});

The two best options, imo, would be 1) DOM-traversal, or 2) manipulating ID fragments.
Under the first way, you would pass a reference to the element where the event takes place (the minus sign) and then navigate the DOM from there to the get the appropriate text box (in jQuery you could use $(this).prev(), for example).
Under the second way, you would assign a prefix or a suffix to the ID of the triggering element (the minus sign), and the same prefix or suffix to the target element (the text box). You can then (again) generate the appropriate ID for your target element by simple string manipulation of the ID from the triggering element.
Is that sufficient to get you started?

Try adding a class to the field and the same class to the minus sign.
So add this right after the setAttribute id,
newTBDiv.setAttribute('class', 'field' + intFields);
then just remove any elements that have that class.