We Keep Coding

why does my images keep overwriting itself instead of showing each image in the for loop?

I've been trying to get my images to appropriately show in their respective table cell, however it appears my images are just overwriting each other in the first cell instead of printing it in the next cell.
I been looking at this for a day or two now, perhaps a fresh set of eyes will spot the problem.
<table class="table table-striped table-bordered">
<c:forEach var="tempMuscleGroup" items="${musclegroups}">
<tr>
<td class="not_mapped_style" style="text-align: center">
${tempMuscleGroup.name} <br> ${tempMuscleGroup.description}<br>
<img id="imageId" src="" />
</td>
</tr>
<script type="text/javascript">
console.log("${tempMuscleGroup.name}");
if ("${tempMuscleGroup.name}" == "Abdominals") {
document.getElementById("imageId").src = "/static/images/abs.jpg";
}
if ("${tempMuscleGroup.name}" == "Biceps") {
document.getElementById("imageId").src = "/static/images/bicep.jpg";
}
if ("${tempMuscleGroup.name}" == "Calves") {
document.getElementById("imageId").src = "/static/images/calves.jpg";
}
if ("${tempMuscleGroup.name}" == "Chest") {
document.getElementById("imageId").src = "/static/images/chest.jpg";
}
if ("${tempMuscleGroup.name}" == "Forearms") {
document.getElementById("imageId").src = "/static/images/forearms.jpg";
}
if ("${tempMuscleGroup.name}" == "Quads") {
document.getElementById("imageId").src = "/static/images/quads.jpg";
}
if ("${tempMuscleGroup.name}" == "Shoulders") {
document.getElementById("imageId").src = "/static/images/shoulder.jpg";
}
if ("${tempMuscleGroup.name}" == "Traps") {
document.getElementById("imageId").src = "/static/images/traps.jpg";
}
</script>
</c:forEach>
</table>

The main problem is that you try to render multiple items with the same ID - imageId. Each one of the for loops creates a script that calls the element with the ID imageId and set's its ID over and over again, because in HTML IDs are unique. You might want to set a class instead.
But there's another problem, which isn't an error but is definitely a problem:
In your backend, you have this for loop:
<c:forEach var="tempMuscleGroup" items="${musclegroups}">
That renders the code in it n times (for n musclegroups). Then, in each time it renders, you place a script which has a lot of ifs for a simple check. Bad practice! Why? Because you render an image through your backend and then ask frontend to determine which picture it is, adding bloat of code. The code rendered will look like:
if ("Biceps" == "Abdominals") {
document.getElementById("imageId").src = "/static/images/abs.jpg";
}
if ("Biceps" == "Biceps") {
document.getElementById("imageId").src = "/static/images/bicep.jpg";
}
if ("Biceps" == "Calves") {
document.getElementById("imageId").src = "/static/images/calves.jpg";
}
if ("Biceps" == "Chest") {
document.getElementById("imageId").src = "/static/images/chest.jpg";
}
if ("Biceps" == "Forearms") {
document.getElementById("imageId").src = "/static/images/forearms.jpg";
}
if ("Biceps" == "Quads") {
document.getElementById("imageId").src = "/static/images/quads.jpg";
}
if ("Biceps" == "Shoulders") {
document.getElementById("imageId").src = "/static/images/shoulder.jpg";
}
if ("Biceps" == "Traps") {
document.getElementById("imageId").src = "/static/images/traps.jpg";
}
You'd never write this code yourself, wouldn't you? Of course not. And this huge chunk of code gets repeated for each one of your muscles. So what?
Firstly, you added an extra 6.704kb of code for this simple action, and that's just for repeating this code 8 times. It doesn't sound a lot, but you're adding ~n^2*105 bytes where n is the number of items, where it isn't necessary.
Plus, perhaps more importantly, it makes the code rendered ugly and hard to read when debugging.
Instead, do this in the backend - use your JSP code to decide what the src should be in any way you'd like - having a preset constant HashMap of muscles & image sources, saving the image sources in the database and pulling them when needed, using an if statement like this (which is less recommended as it is still bloated). You just saved a lot of clutter for yourself & bandwidth for users :)
In this way, this solves your bug (which should still be fixed as identical IDs are invalid HTML) as you don't need to dynamically get the image, so all you'd need to do is remove the id tag from your img tag. You don't really need a way to dynamically reference it now as this is done from backend. If you do, I'd recommend either setting a class or a unique id (perhaps generate one from the muscle name, like img-{musclenamehere}.

This code seems to be working for what i need, thanks for all the kind suggestions!
<table class="table table-striped table-bordered">
<c:forEach var="tempMuscleGroup" items="${musclegroups}">
<tr>
<td class="not_mapped_style" style="text-align: center"><a
href="${pageContext.request.contextPath}/musclegroup/list/${tempMuscleGroup.name}/">
${tempMuscleGroup.name} </a><br> ${tempMuscleGroup.description}<br>
<img id="imageId" class="image" src="" /></td>
</tr>
<script type="text/javascript">
console.log("${tempMuscleGroup.name}");
if ("${tempMuscleGroup.name}" == "Abdominals") {
document.getElementsByClassName("image")[0].src = "/static/images/abs.jpg";
} else if ("${tempMuscleGroup.name}" == "Biceps") {
document.getElementsByClassName("image")[1].src = "/static/images/bicep.jpg";
console.log("INSIDE BICSEPS" + "${tempMuscleGroup.name}");
} else if ("${tempMuscleGroup.name}" == "Calves") {
document.getElementsByClassName("image")[2].src = "/static/images/calves.jpg";
} else if ("${tempMuscleGroup.name}" == "Chest") {
document.getElementsByClassName("image")[3].src = "/static/images/chest.jpg";
} else if ("${tempMuscleGroup.name}" == "Forearms") {
document.getElementsByClassName("image")[4].src = "/static/images/forearms.jpg";
} else if ("${tempMuscleGroup.name}" == "Quads") {
document.getElementsByClassName("image")[5].src = "/static/images/quads.jpg";
} else if ("${tempMuscleGroup.name}" == "Shoulders") {
document.getElementsByClassName("image")[6].src = "/static/images/shoulder.jpg";
} else if ("${tempMuscleGroup.name}" == "Traps") {
document.getElementsByClassName("image")[7].src = "/static/images/traps.jpg";
}
</script>
</c:forEach>
</table>

how to get exact text value inside a tag in jquery when entities are used

I have a list inside a anchor tag like this
<a href="#" class = "set_priority" data-value = "{{$candidate->id}}" style="text-decoration: none;">
#if($candidate->priority == "")
<li> Prioritize</li></a><br>
#elseif($candidate->priority == "yes")
<li> Deprioritize</li></a><br>
#endif
I have used entity &nbsp for styling purpose. The above code generate html tag according to the response from the server. So it might look either one of these
<li> Prioritize</li>
<li> Deprioritize</li>
I want to alert something when the list item is clicked. I don't know how to compare when &nbsp is used
$('.set_priority').on('click',function(){
var priority_value = $(this).first().text();
if (priority_value = "Prioritize") {
alert('he Prioritised');
}
else if (priority_value = "Deprioritize") {
alert('Prioritised');
}
});
It always alerts alert('he Prioritised'); whatever may be the condition.

You should use comparison operator instead assignment operator and use trim method to remove spaces.
$('.set_priority').on('click',function(){
var priority_value = $(this).first().text().trim();
if (priority_value == "Prioritize") {
alert('he Prioritised');
}
else if (priority_value == "Deprioritize") {
alert('Prioritised');
}
});

replace &nbsp with empty in temporary variable, then compare it. like:-
var priority_value = $(this).first().text();
var temp = priority_value.replace(/ /gi,'');
if (temp == "DePrioritize") {
alert('he Prioritised');
}
else if (temp == "Deprioritize") {
alert('Prioritised');
}

I think you should set the click handler like this
$('set_property li').on('click', function(){
var priority = $(this).first().text(); // This will give you the actual clicked element
// .... rest is same
});

Why isn't this javascript with else if working?

I'm sorry I can't be any more specific - I have no idea where the problem is. I'm a total beginner, and I've added everything I know to add to the coding, but nothing happens when I push the button. I don't know at this point if it's an error in the coding, or a syntax error that makes it not work.
Basically I am trying to get this function "Rip It" to go through the list of Dewey decimal numbers, change some of them, and return the new number and a message saying it's been changed. There is also one labeled "no number" that has to return an error (not necessarily an alert box, a message in the same space is okay.)
I am a total beginner and not particularly good at this stuff, so please be gentle! Many thanks!
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function RipIt()
{
for (var i = l; i <=10 i=i+l)
{
var dewey=document.getElementById(i);
dewey=parseFloat(dewey);
if (dewey >= 100 && 200 >= dewey)
{
document.getElementById('dewey'+ 100)
}
else if (dewey >= 400 && 500 >= dewey)
{
document.getElementById('dewey'+ 200)
}
else if (dewey >= 850 && 900 >= dewey)
{
document.getElementById('dewey'-100)
}
else if (dewey >= 600 && 650 >= dewey)
{
document.getElementById('dewey'+17)
}
}
}
</script>
</head>
<body>
<h4>Records to Change</h4>
<ul id="myList">
<li id ="1">101.33</li>
<li id = "2">600.01</li>
<li id = "3">001.11</li>
<li id = "4">050.02</li>
<li id = "5">199.52</li>
<li id = "6">400.27</li>
<li id = "7">401.73</li>
<li id = "8">404.98</li>
<li id = "9">no number</li>
<li id = "10">850.68</li>
<li id = "11">853.88</li>
<li id = "12">407.8</li>
<li id = "13">878.22</li>
<li id = "14">175.93</li>
<li id = "15">175.9</li>
<li id = "16">176.11</li>
<li id = "17">190.97</li>
<li id = "18">90.01</li>
<li id = "19">191.001</li>
<li id = "20">600.95</li>
<li id = "21">602.81</li>
<li id = "22">604.14</li>
<li id = "23">701.31</li>
<li id = "24">606.44</li>
<li id = "25">141.77</li>
</ul>
<b> </b>
<input type="button" value="Click To Run" onclick="RipIt()">
<!-- <input type="button" value="Click Here" onClick="showAlert();"> -->
</body>
</html>

I see a few issues:
You need to ensure that the id values in the HTML match what you actually feed into getElementById. For instance, you have document.getElementById('dewey'+ 100) which will look for an element with the id value "dewey100", but I don't see any element in your markup with that id value.
You seem to have typed the lower-case letter l where you meant to type the digit 1 (in your for loop).
This code:
var dewey=document.getElementById(i);
dewey=parseFloat(dewey);
...retrieves the element with the id from i (so far so good), but then tries to parse the element as a floating-point number. DOM elements are objects, passing them into parseFloat won't do anything useful. :-) In this case, if you're trying to parse the content of the element, you can get that via the innerHTML property or (on most browers) innerText for just the text. So perhaps:
var dewey=document.getElementById(i);
dewey=parseFloat(dewey.innerHTML);
The line
document.getElementById('dewey'+ 100)
...by itself is a "do nothing" line: It looks up the element, but then doesn't do anything with it. I'd suggest a change, but I have no idea what you're trying to do with that element. :-)
You may not be aware of it (being new), but your browser almost certainly has quite a powerful tool in it called a "debugger". Look on the menus, but in most browsers you can access the "Dev Tools" using the F12 key. Then you go to the "Source" or "Code" tab in the resulting window, which will show you your code. If you click to the left of a line, in most debuggers that sets a breakpoint which will stop the code in its tracks at that point so you can see what's going on. It's worth spending some time learning to use that tool so you can actually watch your code run.

Editing my old answer...
For your HTML, I removed the id's in the list items since you can find a better way to iterate through them. This way you don't have to add a new id when you want to add an li. See below:
<h4>Records to Change</h4>
<ul id="myList">
<li>101.33</li>
<li>600.01</li>
<li>001.11</li>
<li>050.02</li>
<li>199.52</li>
<li>400.27</li>
<li>401.73</li>
<li>404.98</li>
<li>no number</li>
<li>850.68</li>
<li>853.88</li>
<li>407.8</li>
<li>878.22</li>
<li>175.93</li>
<li>175.9</li>
<li>176.11</li>
<li>190.97</li>
<li>90.01</li>
<li>191.001</li>
<li>600.95</li>
<li>602.81</li>
<li>604.14</li>
<li>701.31</li>
<li>606.44</li>
<li>141.77</li>
</ul>
<input type="button" value="Click To Run" onclick="RipIt()">
For your javascript, I found the number of li's and stored in children. Then found the length of this array and set to 'length'. Then I pulled the innerHTML from each child item in the children array and parseFloat'ed it. Then I ran your conditional and created a new value based on the child's value.
Finally that value is stored in the children li item in question.
the JavaScript:
function RipIt() {
var children = document.getElementById("myList").getElementsByTagName("li"),
length = children.length;
for (var i = 0; i < length; i++) {
var child = children[i].innerHTML,
newValue;
child = parseFloat(child);
if (child >= 100 && 200 >= child) {
newValue = child + 100;
} else if (child >= 400 && 500 >= child) {
newValue = child + 200;
} else if (child >= 850 && 900 >= child) {
newValue = child - 100;
} else if (child >= 600 && 650 >= child) {
newValue = child + 17;
}
children[i].innerHTML = newValue;
}
}
You will probably need to work on your conditionals (if/else) to get exactly what you want. You didn't really specify what each condition needed to do in your answer so I just used your original code.

Is javascript namespace polluted?

I do not have a good grasp of the js namespace and am WAGing* re the title, but that's one of my guesses about what's happening.
WAG = Wild Guess
My app is crashing (dramatically); trying to figure out why. In fact, after 3 Q/A pairs, it blows up the entire Chrome tab..! I'm beginning to suspect I've done something wrong in my code...
Warning: Save your browsing session before running these jsFiddles. (In Chrome, the jsFiddle only blows up its own tab but I can't comment on other browsers)
jsFiddle One
jsFiddle Two - dupe in case jsFiddle One blown away
Please help me to understand exactly which spectacular moronism I've committed today.
HTML:
<div id="result">
<div class="truth tr0"><h2>---</h2></div>
<div class="truth tr1"><h2>answer to one</h2></div>
<div class="truth tr2"><h2>answer to two</h2></div>
<div class="truth tr3"><h2>answer to three</h2></div>
<div class="truth tr4"><h2>answer to four</h2></div>
</div>
<div id="replaceLink">
<div class="youcould yc1">
<h2>QUESTION ONE</h2>
</div>
<div class="youcould yc2">
<h2>QUESTION TWO</h2>
</div>
<div class="youcould yc3">
<h2>QUESTION THREE</h2>
</div>
<div class="youcould yc4">
<h2>QUESTION FOUR</h2>
</div>
<div class="youcould yc5">
<h2>THANK YOU</h2>
</div>
</div>
<div id="response"></div>
<input type="button" id="mybutt" value="Start Test" />
Javascript/jQuery:
var cnt = 0;
var window = {};
window.arrDone = [];
function nextQues() {
if (window.arrDone.length == 4) return 5;
success = 0;
while (success == 0) {
nn = Math.floor(Math.random() * 3) + 1;
if (window.arrDone.indexOf(nn) == -1 && nn != 5) {
success++;
window.arrDone.push(nn);
}
}
return nn;
}
$('.youcould, .truth').hide();
$('.tr0').show();
$('.youcould').click(function() {
$(this).hide();
thisA = window.arrDone[window.arrDone.length -1];
$('.tr'+thisA).show();
});
$('.truth').click(function() {
$(this).hide();
nextQ = nextQues();
$('.yc'+nextQ).show();
});
$('#mybutt').click(function () {
$(this).hide();
$('.tr0').hide();
nextQ = nextQues();
$('.yc'+nextQ).show();
});

My guess would be
var window = {};
window is special, so creating a global variable named window is begging for trouble.

Your while loop runs infinitely on the third pass because it doesn't meet the condition.

At some point, arrDone will contain the numbers 1, 2, and 3, as produced by your random generator (which will never produce 5, btw). In that case, nextQues() does not abort and return five (as arrDone.lenght == 3), and will enter the loop. Your random generator produces nothing but the numbers 1, 2, and 3, which always are already in the array, so the if-condition (that would end the loop) is never fulfilled. You have an infinite loop generating random numbers.
I guess you want
function nextQues() {
var l = 4;
if (window.arrDone.length >= l)
return l+1;
while (true) {
var nn = Math.floor(Math.random() * l) + 1; // generate 1, 2, 3 or 4
if (window.arrDone.indexOf(nn) == -1) {
window.arrDone.push(nn);
return nn;
}
}
}

transfer logic into controller

please help to fix the script.
http://jsfiddle.net/rrnJc/
this is a dynamic list of news. you can scroll through.
the problem that the logic is in the template:
<li ng-repeat="item in news" ng-show="$index >= currentPosition && $index <= (currentPosition + qntVisibleRecords)">
this is not right.
I would like to chtby visible part of the list of news was in the controller (in the function $scope.newsVisible). at the same conclusion in the template design and deliver this:
<li ng-repeat="item in newsVisible">
<span class="date">{{item.date}}</span>
<span class="title">{{item.title}} - {{$index}}</span>
</li>

Just slice your array of news when controller is initialized and each time you call the changeCurrent function and iterate through newsVisible. Possible code could be :
$scope.changeCurrent = function(value){
$scope.currentPosition = $scope.currentPosition + value;
if($scope.currentPosition < 0 ){
$scope.currentPosition = 0;
}
var end = Math.min($scope.currentPosition + $scope.qntVisibleRecords, $scope.news.length)
//ensure that you won t slice at an index greater than news.length
$scope.newsVisible = $scope.news.slice($scope.currentPosition, end);
}
BTW you can call this function when the controller initialized in order to init your array of newsVisible.
$scope.changeCurrent($scope.currentPosition);
You can check it here http://jsfiddle.net/rrnJc/1/