We Keep Coding

How to change text under an image when the image is clicked/hovered on

I'm creating a page for a company where they have pictures of the 4 founders all side by side. The text under all 4 images needs to change based on what photo is clicked or hovered on. So one says "mark" in bold and under that it will have his qualifications. But that will all be replaced when I click "kim" who is the next picture.
I'm very new to HTML, CSS, and have never tried javascript so this is my first attempt.
I want the text to be styled the way I want, but I can't find a way to update it all. I only figured out that I can print raw text.
Is there a way to call a div to put the text there and replace it with a new div for each image click?
Like instead of writing .html("Mark does xyz") you could instead paste in the entire div "tr1" with the changed button and heading and paragraph?
<div id="trainers">
<h1><b>Meet Our Trainers</h1>
<img src="jackf.jpg" id="Mark" alt="Mark" width="17%" height="40%">
<img src="kimsond.jpg" id="Kim" alt="Kim" width="17%" height="40%">
<div id="tr1">
<h1><b><br>Mark</b></h1>
<p>Mark has been a personal trainer</p>
<a class="btn" href="#">Book With Mark</a>
</div>
<div id="tr2">
<h1><b><br>Kim</b></h1>
<p>Kim is a nutritionist</p>
<a class="btn" href="#">Book With Kim</a>
</div>
</div>
<script>
$('#Mark').click(function() {
});
$('#Kim').click(function() {
});
</script>

You can use show/hide method for your requirement.
$('#Mark').click(function() {
$('#tr1').show();
$('#tr2').hide();
});
$('#Kim').click(function() {
$('#tr1').hide();
$('#tr2').show();
});
$('#Mark').click(function() {
$('#tr1').show();
$('#tr2').hide();
});
$('#Kim').click(function() {
$('#tr1').hide();
$('#tr2').show();
});
#tr2{
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="trainers">
<h1><b>Meet Our Trainers</h1>
<img src="jackf.jpg" id="Mark" alt="Mark" width="17%" height="40%">
<img src="kimsond.jpg" id="Kim" alt="Kim" width="17%" height="40%">
<div id="tr1">
<h1><b><br>Mark</b></h1>
<p>Mark has been a personal trainer</p>
<a class="btn" href="#">Book With Mark</a>
</div>
<div id="tr2">
<h1><b><br>Kim</b></h1>
<p>Kim is a nutritionist</p>
<a class="btn" href="#">Book With Kim</a>
</div>
</div>

$('#Mark').click(function() {
var elementToClone = document.getElementById('tr1');
var clone = elementToClone.cloneNode(true);
var container = document.getElementById('container');
// Then you need to append that cloned element into a container on the page.
container.appendChild(clone);
});
The container will be en element in your HTML that currently is not there. This is just a place where you want this cloned HTML to go:
<div id="container></div>
This will get you to a point where you've copied the HTML you need and placed it where you want it on the page. When you click a different image, you'll need to remove this HTML, clone the other HTML and append it to container. You'll also probably need an if statement in there to check if container contains something already.
You're using jQuery in your question, so this answer uses the jQuery click function -- if you don't have jQuery included, you'll need it.
You can also use these vanilla js click methods:
<img id="Mark" onclick="doHTMLAppendFunction()" src="foo.jpg" />
or
document.getElementById('Mark').addEventListener('click', doHTMLAppendFunction);

You're trying to use JQuery to achieve this and following does the job. There used the common class "trainer-text" to hide all overlay texts to hide at the initial point. Use some css to make the text on your images. Refer the following to achieve that. https://www.w3schools.com/howto/howto_css_image_overlay.asp
/*
Use the following if you need display text for hover event
*/
$("#Mark").mouseover(function(){
$("#tr1").css("display", "block");
});
$("#Mark").mouseout(function(){
$("#tr1").css("display", "none");
});
$("#Kim").mouseover(function(){
$("#tr2").css("display", "block");
});
$("#Kim").mouseout(function(){
$("#tr2").css("display", "none");
});
/*
Use the following if you need display text for click event
*/
$('#Mark').click(function() {
$('#tr1').show();
$('#tr2').hide();
});
$('#Kim').click(function() {
$('#tr1').hide();
$('#tr2').show();
});
.trainer-text {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="trainers">
<h1><b>Meet Our Trainers</b></h1>
<img src="jackf.jpg" id="Mark" alt="Mark" width="17%" height="40%"/>
<img src="kimsond.jpg" id="Kim" alt="Kim" width="17%" height="40%"/>
<div id="tr1" class="trainer-text">
<h1><b><br>Mark</b></h1>
<p>Mark has been a personal trainer</p>
<a class="btn" href="#">Book With Mark</a>
</div>
<div id="tr2" class="trainer-text">
<h1><b><br>Kim</b></h1>
<p>Kim is a nutritionist</p>
<a class="btn" href="#">Book With Kim</a>
</div>
</div>

Change color of text if value changes, JS or Jquery

I have a div that looks like this:
<div class="ProductPriceWrap">
<div class="DetailRow RetailPrice" style="display: none; ">
<span class="Label">MSRP:</span>
</div>
<div class="DetailRow PriceRow" style="">
<div class="Value">
<em class="ProductPrice VariationProductPrice">$42.00</em>
</div>
</div>
</div>
I need a script that changes the color of the price value to red if it changes. I started by getting the value when the page loads and figured I could do something like, if < original value, style red, but I am still new to JavaScript and cant quite work it out.
Any input is appreciated! Thanks!

At first I would at an ID:
<em id="price" class="ProductPrice VariationProductPrice">$42.00</em>
then you can make something like
if ($("#price").text().substr(1) < original_value) {
$("#price").css("color","red");
}
And the if statement should be inside your change function

You need to have a input to be able to have a event on change.
So my suggestion is to add a input (you can remove the border to not look like a input), and add a class that applies the color red.
html
<input id="Input_id" class="ProductPrice VariationProductPrice" value="$42.00">
jQuery
$(document).ready(function () {
$('#Input_id').on('change', function () {
$(this).addClass('red');
});
})
Demo here

How to add div to span inside this table row?

I have a table row as such:
<tr class="song-row song-row-selected" data-id="1">
<td data-col="title">
<span class="song-content">
<img src="img/cover3.jpg" />
Song Title
</span>
</td>
<td>3:37</td>
<td>song artist</td>
<td>song album</td>
<td>23</td>
</tr>
I want to add a div to indicate that the song is paused (surrounded by *):
<tr class="song-row song-row-selected" data-id="1">
<td data-col="title">
<span class="song-content">
<img src="img/cover3.jpg" />
Song Title
*<div class="song-indicator loading"></div>*
</span>
</td>
<td>3:37</td>
<td>song artist</td>
<td>song album</td>
<td>23</td>
</tr>
I was hoping to use JQuery. So far I have:
function displayPause() {
$('tr.song-row.song-row-selected:first').each(function() {
$(this).siblings('td span.song-content').add('<div class="song-indicator paused"></div>');
});
}
Needless to say, it doesn't add the div. Also, I would like a function for me to easily remove the div from the span. Does anyone know where to point me in the right direction?

You should be using append as well as children, not siblings
$(this).children('td span.song-content').append('<div class="song-indicator paused"></div><input type="button" class="removeDiv" value="Remove"/>');
I also added a button right next to your div, clicking this will remove that div with this code:
$(document).on("click", ".removeDir", function() {
$(this).prev(".song-indicator").remove();
$(this).remove();
});

append is what you want:
$(this).find('td span.song-content')
.append('<div class="song-indicator paused"></div>');
This will ... append the div to the end of your span.
Also, as tymeJV says, your td is not a sibling of your tr; it's a child. Use either children, or find to grab it.
And to remove it, you'd use remove. If I understand your app correctly, it should be something like this:
$('tr.song-row.song-row-selected:first')
.find("div.song-indicator.paused").remove();

Here a litte sample on jsfiddle
$("tr.song-row-selected:first td span.song-content").append("*<div class='song-indicator loading'></div>*");

Changing content in a div when a link is clicked

I am trying to change a div content box when a link above that box is clicked. I added a click function to the individual buttons then the corresponding dive containing the content for that particular box should be displayed.
When I apply the jQuery to the page, the content does not change according to the link that is clicked and the page displays awkwardly.
This is the jsfiddle I'm working with.
The webpage I'm working with is here.
Place where am i making the mistake.
The jQuery I'm working with so far looks like this
$(document).ready(function() {
$('.question1').click(function(){
$('.new_member_box_display').load('#answer1');
})
$('.question2').click(function(){
$('.new_member_box_display').load('#answer2');
})
$('.question3').click(function(){
$('.new_member_box_display').load('#answer3');
})
$('.question4').click(function(){
$('.new_member_box_display').load('#answer4');
})
});//end of ready
The HTML I'm working with looks like this :
<div class="new_member_box">
<h4>Vision</h4>
</div>
<div class="new_member_box">
<h4>Church History</h4>
</div>
<div class="new_member_box">
<h4>Becoming a Member</h4>
</div>
<div class="new_member_box">
<h4>Pastor-in-Training</h4>
</div>
</div>
<div class="clear" class="question"></div>
<div id="answer1">
1
</div>
<div id="answer2">
2
</div>
<div id="answer3">
3
</div>
<div id="answer4">
4
</div>
<div class="new_member_box_display" id="question">
Text will appear here when one of the tabs above is clicked
</div>

load() loads an external file with ajax, not elements on your page. You're probably just trying to hide and show elements :
$('[class^="question"]').on('click', function(e){
e.preventDefault();
var numb = this.className.replace('question', '');
$('[id^="answer"]').hide();
$('#answer' + numb).show();
});
FIDDLE

Here's a fiddle that does what I think you're looking to do. There are cleaner ways to do it, but this should work.
http://jsfiddle.net/PZnSb/6/
Basically you want to set the inner html of one element to the inner html of another, like this:
$('.question1').click(function(){
$('.new_member_box_display').html($('#answer1').html());
})
instead of this:
$('.question1').click(function(){
$('.new_member_box_display').load('#answer1');
})

It seems you just want the text to change when you click, try this.
$(document).ready(function() {
$('.question1').click(function(){
$('.new_member_box_display').text($('.answer1 ').text());
});
$('.question2').click(function(){
$('.new_member_box_display').text($('.answer2').text());
});
$('.question3').click(function(){
$('.new_member_box_display').text($('.answer3').text());
});
$('.question4').click(function(){
$('.new_member_box_display').text($('.answer4').text());
});
});
http://jsfiddle.net/cornelas/PZnSb/7/embedded/result/

resize two elements simultaneously using jquery/js

i have been trying to resize two windows simultaneously but for some reason it doesnt work.
i tried to catch errors but nothing.
Note: i dont want to use jquery resize since it doesnt have a fast inteval for checking resizes
JAVASCRIPT:
function _u(e){
try {
e.parent('.boss').find('.first').width( e.width() ); //tried with parent('.boss').next('.first') or directy with prev('.first')
} catch(err){alert(err);}
}
$(document).ready(function(){
$(".data").each(function(){
var resizerint;
$(this).mousedown(function(){
try {
var eee = $(this);
var resizerint = setInterval(function(){
try {
_u( eee );
} catch(err){alert(err);}
},10); // i need it 10ms
} catch(err){alert(err);}
$('.test').html('<font style="position:absolute;top:0;right:0;color:red;"> mouse DOWN </font>');
}).mouseup(function(){
try{
clearInterval(resizerint);
} catch(err){alert(err);}
$('.test').html('<font style="position:absolute;top:0;right:0;color:green;"> mouse UP </font>');
});
});
});
and HTML:
<div class="boss">
<div class="first">
<table>
<tr>
<td>
<div class="title">ONEEEEE</div>
</td>
</tr>
</table>
</div>
<div class="second">
<textarea class="data" > ONEEE TEXTY TESTY NJAMMM! </textarea>
</div>
</div>
<div class="boss">
<div class="first">
<table>
<tr>
<td>
<div class="title">TWOOOOOO</div>
</td>
</tr>
</table>
</div>
<div class="second">
<textarea class="data" > TWOOO TEXTY TESTY NJAMMM! </textarea>
</div>
</div>
<div class="text"></div>
Thank you in advance for any help you can provide.
JSFIDDLE (IF YOU SEE , THE BLUE DOESNT RESIZE WHEN MOUSEDOWN at the TEXTAREA )
http://jsfiddle.net/2sfFW/

My first answer was that there was a missing "$" but it didn't fix the problem.
Got it working to some extent, but you have to click into the text field first before it will initialize. I used your blue version as a visualizer.
The proper jquery traversal is
e.parent().parent('.boss').find('.first')
or
e.parents('.boss').find('.first')
You have to use the plural version because there are two parent divs above it. Using parent().parent() is more specific but probably not necessary in this case.
http://jsfiddle.net/aQKVD/1/
If you remove the mouseup/mousedown handlers it will initialize at document.ready instead, which I think might be what you want. You don't necessarily need to do the clearing of the variable unless you have some other need for it, since .each() creates a separate instance of the function tied to the specific div in question. Here's a version like that:
http://jsfiddle.net/aQKVD/2/

Doesn't fix it in JSfiddle, but for starters you've left off a "$". I've set up a JSfiddle link so other people can try it. http://jsfiddle.net/aQKVD/
function _u(e){
try {
e.parent('.boss').find('.first').width( e.width() ); //tried with parent('.boss').next('.first') or directly with prev('.first')
} catch(err){alert(err);}
}
$(document).ready(function(){
(".data").each(function(){
last line should be
$(".data").each(function(){