`if` fails to check value of an <img> src - javascript

I don't understand what is wrong with my code. The if doesn't seem to be working in this case. I'd like the image to change when people click on the button. Can somebody help me please?
<body>
<div>
<img id="en_garde" src="gifattaque/gif1.png">
</div>
<br>
<button onclick=attaque_animation() type="button">Attaque</button>
<script>
function attaque_animation() {
if (document.getElementById("en_garde").src=="gifattaque/gif1.png") {
document.getElementById("en_garde").src="gifattaque/gif2.png";
}
};
</script>
</body>
</html>

The src property will be expanded to the full image source (including http://...), and so won't exactly match the value you're looking for.
You're better off checking the end of the property:
if (document.getElementById("en_garde").src.match(/gifattaque\/gif1\.png$/))
document.getElementById("en_garde").src = "gifattaque/gif2.png";

to select the element you can use:
document.querySelector('[src$="gif1.png"]')
it will check for src attr ending with "gif1.png".
var el = document.querySelector('[src$="gif1.png"]');
if (el)
el.src="gifattaque/gif2.png";
console.log(el)

Related

Why can't I access `element.firstChild` in this case?

function setText() {
// doesn't change... why not!?
document.getElementById("demo").firstChild.innerHTML = 'changed!';
}
//calling the function with setTimeout to make sure the HTML is loaded
setTimeout(setText, 500);
<div id="demo">
<p>first</p>
<p>second</p>
</div>
I can't seem to be able to change <p>first</p> to <p>changed!</p>. Why not?
Whitespace inside elements is considered as text, and text is considered as nodes.
If you change the HTML to:
<div id="demo"><p>first</p><p>second</p></div>
it works. Try it.
Or you can use node.firstElementChild to ignore leading text, or use a library like jQuery which takes care of this.
On consoling document.getElementById("demo").firstChild I get this
.
The highlighted part show empty text. That may be the reason as it is not the first p element.
Instead you can use firstElementChild
function setText() {
document.getElementById("demo").firstElementChild.innerHTML = 'changed!';
}
setTimeout(setText, 1000);
<div id="demo">
<p>first</p>
<p>second</p>
</div>
You can always use children method or querySelector
function SetText(){
document.getElementById('demo').children[0].textContent = "changed"
}
Or
function SetText() {
document.querySelector('#demo > *').textContent = "changed"
}
Using ".firstChild" will select the whitespace in a div if there is any. In your case there is some. You have two options, either take our the whitespace/newlines or use this function instead...
function setText() {
// doesn't change because the firstChild isn't the <p> element...
// try using firstElementChild
document.getElementById("demo").firstElementChild.innerHTML = 'changed!';
}

How do I Change JSON Object using Javascript

I have the following line in my code. It was generated by my IDE. Basically this line consists of a div which acts as an animated sidebar. The width of the sidebar is represented by the 'v' parameter (set here at 85).
<div id="sidebar" class="inner-element uib_w_5 uib_sidebar rightbar bar-bg thumb-bg bar-gutter" data-uib="layout/right_sidebar" data-ver="1" data-anim="{'style':'overlap', 'v':85, 'side':'right', 'dur':200}">
I would like to change the value of 'v' to 250 using a Script Tag.
I tried to insert the following script to overwrite the above data-anim attribute but it did not work.
<script>
document.getElementById("sidebar").jsonObj['data-anim'] = "{'style':'overlap', 'v':250, 'side':'right', 'dur':200}"
</script>
Any ideas as to what's wrong with my <script> tag ?
use setAttribute of the sidebar element
it should be
var sidebar = document.getElementById("sidebar");
sidebar.setAttribute( "data-anim" , "{'style':'overlap', 'v':250, 'side':'right', 'dur':200}" );
read up this setAttribute documentation as well
document.getElementById("sidebar").setAttribute("data-anim", "{'style':'overlap', 'v':250, 'side':'right', 'dur':200}");
var abc = document.getElementById("sidebar").getAttribute("data-anim");
alert(abc);
<div id="sidebar" class="inner-element uib_w_5 uib_sidebar rightbar bar-bg thumb-bg bar-gutter" data-uib="layout/right_sidebar" data-ver="1" data-anim="{'style':'overlap', 'v':85, 'side':'right', 'dur':200}">
I found the answer to my own question.
Here is the <script> that will work:
document.getElementById("sidebar").dataset.anim = "{'style':'overlap', 'v':250, 'side':'right', 'dur':200}";

Append a div outside of the input parent

Im fairly new to javascript and I just can't figure this out despite my attempt in researching. How do I track the change of a input within a div and trigger an append to an outside div? My code goes as follow:
Append h3 with "Pending" once ".image-value" input has a change in value
<!-- APPEND <h3> -->
<h3>Best Overall Costume<div class="pending">Pending</div></h3>
<div>
<div class="select-form">
<img src="images/vote.jpg" data-value="image_value">
<img src="images/vote.jpg" data-value="image_value2">
<img src="images/vote.jpg" data-value="image_value3">
<img src="images/vote.jpg" data-value="image_value4">
<img src="images/vote.jpg" data-value="image_value5">
<!-- Track the change of this input -->
<input type="hidden" class="image-value" name="selected_image" value="">
</div>
</div>
I tried this:
function changeStatus(statusValue) {
$("input",".select-form").val(statusValue).trigger("change");
}
$("input",".select-form").change(function(){
if (!$(this).val()){
$("<div class='pending'>Pending</div>").appendTo($("h3").prev($(this)));
}
});
But that didn't seem to work. Any ideas?
place an empty div where you want your new div and give it an id i.e(<div id='myDiv'><div>) and then append what you want like this.
$( "#myDiv" ).append( "<div class='pending'>Pending</div>" );
You can also check Append Explained
for more explanations.
Thanks.
I've done a couple things here... First, I'm not sure why you had it all in a named function. When you're using event listeners that often isn't necessary.
Then, I don't know what the val check was for, so I reversed it.
Finally, I'm using one(), which only runs once. This case seemed to call for that.
$('.select-form').one('change', 'input', function () {
if ( $(this).val() ) { alert('asdgf');
$("<div class='pending'>Pending</div>")
.appendTo($(this).parent().prev('h3'));
}
});
Fiddle
try this:
$("input",".select-form").on("change", function(){
var $this = $(this);
if (!$this.val()){
var elem = $('<h3>Best Overall Costume<div class="pending">Pending</div></h3>');
$this.parent().parent().before(elem);
}
});
you can also place a check, that if the pending div is already added, not to add it again.
Of course this solution assumes that there are no other nested divs between the target div(before which you want to append) and the input control

Why the href attribute is not getting set in followinng scenario?

I'm using jQuery Colorbox library. I'm not able to a set the href attribute value of anchor tag. Can you help me in setting the value? If I print the value in alert it's printing correct href attribute value. My code is as follows:
<a class="edit_user_transaction_status c-btn" updatehref="{$control_url}{$query_path}?op=edit_user_transaction&page={$page}&txn_no={$user_transaction_details.transaction_no}&transaction_data_assign={$user_transaction_details.transaction_data_assign}&user_id={$user_id}{if $user_name!=''}&user_name={$user_name}{/if}{if $user_email_id!=''}&user_email_id={$user_email_id}{/if}{if $user_group!=''}&user_group={$user_group}&{/if}{if $user_sub_group!=''}&user_sub_group={$user_sub_group}{/if}{if $from_date!=''}&from_date={$from_date}{/if}{if $to_date!=''}&to_date={$to_date}{/if}{if $transaction_status!=''}&transaction_status={$transaction_status}{/if}{if $transaction_no!=''}&transaction_no={$transaction_no}{/if}" href="#updatePopContent">Update</a>
<div class="hidden">
<div id="updatePopContent" class="c-popup">
<h2 class="c-popup-header">Transaction</h2>
<div class="c-content">
<h3>Are you sure to change status?</h3>
NoYes
</div>
</div>
</div>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$(".edit_user_transaction_status").click(function(e) {
//$.colorbox.close();
var update_url = $(this).attr('updatehref');
$('#update_url').attr('href', update_url);
$(".edit_user_transaction_status").colorbox({inline:true, width:666});
$(".c-btn").bind('click', function(){
$.colorbox.close();
});
});
});
</script>
I'm not able to set the value of href attribute (i.e. update_url) to the anchor tag having id update_url. Can you help me in this? Thanks in advance.
Try setting a data attribute instead of a made-up one (should work, but better to use data. Also, know that firebug, etc. doesn't always change when something is dynamically updated ive found. You can always console.log($('.edit_user_transaction_status').attr('href')) to check the final value:
<a class="edit_user_transaction_status c-btn" data-updateHref="{$control_url}... href="#updatePopContent">Update</a>
$(".edit_user_transaction_status").click(function(e) {
//$.colorbox.close();
var update_url = $(this).data('updateHref');
$('#update_url').attr('href', update_url);
$(".edit_user_transaction_status").colorbox({inline:true, width:666});
$(".c-btn").bind('click', function(){
$.colorbox.close();
});
});

Image Being Appended and Removed But Text Not being Removed jQuery

So here's my code:
<input type = checkbox id = "kinch" name = "link" > Bunz </input>
<div id = bootypipe></div>
Here's the JavaScript:
$("#kinch").click(function(){
if ($("#kinch").is(":checked")) {
//Add image to div bootypipe
$("#bootypipe").append("<image id = 'chink' src = 'http://4.bp.blogspot.com/_TUdhYRa2Xm0/RsuDa4NvSEI/AAAAAAAAAQs/jr_r6v_SUgs/s320/New-England-Style-Hot-Dog-Buns_8A827671.jpg'>HA!</image>");
} else {
$("#chink").remove();
}
});
Here's the jsfiddle: http://jsfiddle.net/shrimpboyho/wUu34/13/
The image removes and appends, but when I remove the image the text Ha! still stays and builds up over time. How can I remove this?
Cant you just do :
$("#bootypipe").empty();
instead of removing image.
Because you only remove the image tag not the text. You could do like this
wrap the image and text with one div and then remove the div tag like
$("#kinch").click(function(){
if ($("#kinch").is(":checked")) {
//Add image to div bootypipe
$("#bootypipe").append("<div id='chink_outer'><img id = 'chink' src = 'http://4.bp.blogspot.com/_TUdhYRa2Xm0/RsuDa4NvSEI/AAAAAAAAAQs/jr_r6v_SUgs/s320/New-England-Style-Hot-Dog-Buns_8A827671.jpg'/>HA!</div>");
} else {
$("#chink_outer").remove();
}
});
Demo
<image id = 'chink' src = 'http://4.bp.blogspot.com/_TUdhYRa2Xm0/RsuDa4NvSEI/AAAAAAAAAQs/jr_r6v_SUgs/s320/New-England-Style-Hot-Dog-Buns_8A827671.jpg'>HA!</image>
is invalid HTML markup; the element can't actually contain text. And the correct tag is <img>. I suspect it is actually being interpreted as
<img id='chink' src='...' > HA!
meaning the text isn't part of the element, and isn't removed with it.
Instead of doing $('#chink').remove(), do $('#bootypipe').empty() to remove everything you added.
The <img> element is self closing, like <br> or <hr> (your demo code is invalid, as mentioned in another answer).
But your code works, if you just include a wrapper (<p>,<span>,<div>) around the image. Then remove the wrapper (ie $('p').remove();). Do not add additional ids, classes (you've already created a function around #kinch. why add to the code?). Just target the wrapper. $('#chink').parent().remove(); works too, and it's unbiased to what element is the parent.
$("#kinch").click(function(){
if ($("#kinch").is(":checked")) {
$("#bootypipe").append("<p><image id = 'chink' src = '...'>HA!</p>");
} else {
$('p').remove();
// or $('#chink').parent().remove(); // pick your poison
}
});

Categories

Resources