I have a bunch of pictures in a table. The pictures are also used with a lightbox function.
the simplified code is
<table><tr><td>
<img src="images/december122012.jpg" width="100px">
<img src="images/december142012.jpg" width="100px">
</td></tr></table>
what I want to do is have a function that will add the values of the various images. I read the following code to use somewhere but the alert just says undefined.
<script>
var val2 = parseInt(december122012.value);
alert (val2.value);
</script>
after I get the values to be assigned correctly I'm wanting to do something like
var year2012= december122012.value + december142012.value
alert (year2012);
thanks for the help!
Try using document.getElementById("december122012").value.
This will get the value from the "a" elements. The "img" elements do not have a value attribute.
You can not just reference an element by a string, you need to use getElementById or getElementsByName. And when you are reading the attributes, they will be strings so you will have to convert them to numbers.
Related
Hello I have the following code:
<img alt="image321" onclick="image(//here i want to pass the alt attribute to my function Bild()//);" src="http://i3.ytimg.com/vi/${videoId}/hqdefault.jpg" />
<script>
function image(alt){
alert(alt.src);
}
</script>
I have my image and have given it an alt attribute with the value "image321".Now I want to pass this value to my function image() and output the value with alert as soon as I clicked on the image. But the output is always undifined. Could someone please help me how to solve this problem.
Many greetings Nils
First thing would be to avoid inline handlers - they have quite a few problems, too many to be worth using nowadays, such as a demented scope chain and quote escaping issues. Attach event listeners properly using Javascript with addEventListener instead.
Inside the listener, reference this to get to the clicked element, and its src property to get to its src:
document.querySelector('img').addEventListener('click', function() {
console.log(this.src);
console.log(this.alt);
});
<img alt="image321" src="http://i3.ytimg.com/vi/${videoId}/hqdefault.jpg" />
function myfunc(img){
alert(img.alt);
}
<img alt="image321" onclick="myfunc(this);" src="http://i3.ytimg.com/vi/${videoId}/hqdefault.jpg" />
You should try using this, which sends the element that you run the function with.
Here is an example:
function image(alt) {
alert(alt.src);
}
<img alt="image321" src="http://i3.ytimg.com/vi/${videoId}/hqdefault.jpg" onclick="image(this)"/>
I can't manage to make jQuery add the content of #quote (which is a paragraph with a string generated via foresmatic API).The full code is here: https://codepen.io/raffaele2692/pen/GvrvxM .... Can you help me? :)
<a type="button" class="twitter-share-button"
href="https://twitter.com/intent/tweet"
data-size="small"
data-text="">
Tweet</a>
<script>
var textQuote = document.getElementByID("#quote");
$("a").attr("data-text", textQuote);
</script>
You have some issues in the js code. You do not need to add "#" to the id for getElementByID call , also to get the text of a HTML element you can use text method.
<script>
var textQuote = $("#quote").text();
$("a").attr("data-text", textQuote);
</script>
I think textQuote is a HtmlElement object, not the value you want to assign.
you should get the value in quote first.
btw, jquery has a method called data to assign value to data attributes.
I have a video-playlist where the video scr is created in javascript:
video[0].src = video_url;
Now I want to use the variable "video_url" as my description text
<td id="description"></td>
So in html it should look like
<video src="video01.mov"></video>
<td id="description">video01.mov</td>
I tried to do this with the following code:
$('#description').append(video_url);
But now everytime I click on my next or previous button to load the next video jquery adds the next name to my td instead of just take the current src name:
<video src="video05.mov"></video>
<td id="description">video01.movvideo02.movvideo03.movvideo04.movvideo05.mov</td>
How is it possible that jquery uses only the CURRENT name of the src?
Thank you for your help!
Instead of:
$('#description').append(video_url);
Use:
$('#description').html(video_url);
Instead of
$('#description').append(video_url);
Try
$('#description').html(video_url);
OR
$('#description').text(video_url);
The Problem in your case is that .append() only append the values to existing value but you want to replace old value with new value.
you are using id which is one time use so if you want to do anything dynamic user class and in click function write $(this).find('your class name').html(video_url) and then it will not add one after one .
I have the following:
editCity: "/Admin/Citys/Edit?pk=0001I&rk=5505005Z"
$('#editCity')
.attr('title', "Edit City " + rk)
.data('disabled', 'no')
.data('href', editCity)
.removeClass('disabled');
When I check the HTML with developer tools I see this:
<div class="button dialogLink" id="editCity"
data-action="EditCity" data-disabled="yes"
data-entity="City" title="Edit City 5505005Z" ></div>
Everything is updated except the href. Anyone have an ideas what I am doing wrong?
Use
var editCity = "/Admin/Citys/Edit?pk=0001I&rk=5505005Z";
What you did was a labeled statement, consisting only of a string literal and missing a semicolon.
Btw, jQuery's .data() method is not to be used for data-attributes, but just for associating JS objects with DOM elements.
I think jQuery stores the data internally if they don't exist the first time you set them. If you really want to force it:
$("#editCity").attr("data-href",editCity)
You cannot set a href attribute to a div.
you could use data-href instead, or use a a-tag instead of a div.
I'm trying to create a generic javascript function that would change attributes on events.
The way it would work is
function fooFunction(sourceElement)
{
var newName = sourceElement+'Span';
var newElement = document.getElementById(newName);
//Important line
newElement.property = "enter properties here";
}
and I'd call it with something like
<img src="foo.gif" id="foo" name="foo" onmouseover="fooFunction(this.id);"/>
<span id="fooSpan" name="fooSpan">some text here</span>
So in theory, when hovering the image, it should change whatever propery I need to change on the fooSpan object. It works in Opera, but on IE it returns a null object.
Any ideas ?
The idea would be that I would have multiple images that would automatically trigger the property change on the associated text span (typically the css style).
Are you sure you're getting the ID properly in IE? Maybe the ID being passed in is null in IE (perhaps this.id isn't working?).
Try calling it like this:
<img src="foo.gif" id="foo" name="foo" onmouseover="fooFunction('foo');"/>
and see if that helps. I don't see any reason why getElementById() would fail, so the only thing I can think of is that it's an ID issue.
May be this line won't work in IE. "newElement.property"
I don't know the exact reason.
You can use this instead of that line
newElement.setAttribute(property,"enter properties here");
In the mean time, i am trying to find out the reason behind the error.
My suggestion would to do something like this.
function fooFunction(sourceElement,property,propertyValue) {
var newElement = document.getElementById(sourceElement);
newElement.setAttribute(property,propertyValue);
};
And your HTML would look like:
<img src="foo.gif" id="foo" name="foo"
onmouseover="fooFunction('fooSpan','class','mouseover_span');"/>
<span id="fooSpan" name="fooSpan">some text here</span>
I'd STRONGLY urge you to consider using jQuery's built-in attr() method which integrates the function you want perfectly across browsers and is incredibly easy to use.
Using your example, if you wanted to change the "src" property for "foo", you could do it in a single line of code:
$("#foo").attr("src","images/whatever.png");
Similarly, if you wanted to change the html WITHIN "fooSpan", all you'd have to do is:
$("#fooSpan").html("something else");
You can even tie these to events that are going to give you a lot more flexibility than the onmouseover property:
$(document).ready(function(){
$("#foo").mouseover(function(){
$("#fooSpan").html("something else");
$("#foo").attr("src","images/whatever.png");
});
});