Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
I am hoping to find out why the following code does not work:
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("#myimg").attr("src", "image2.jpg");
});
</script>
<div>
<img class = "myimg" src = "image1.jpg" alt = "Sample image" />
</div>
while this block does:
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("#myimg").attr("src", "image2.jpg");
});
</script>
<div>
<img id= "myimg" src = "image1.jpg" alt = "Sample image" />
</div>
In your html in the first block you need to set the id of the img tag to myimg:
<img id="myimg">
If you're going to call it with $('#myimg')
You can also just change your jquery to call it like:
$('.myimg')
That's messed up, but the error in your first example is you are looking for an element with an id #myimg instead of a class .myimg
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I need some help on editing elements which are in HTML with JavaScript. Is it possible to change the "text" with javascript? I've tried using document.getElementById but I don't think I'm doing it correctly.
Get the elemet with a query like you would use in css:
var element = document.querySelector('div.header');
Change the content using the textContent property:
element.textContent = "New Content;"
Adding image to content:
document.querySelector('div.header').innerHTML = "<img src='smiley.gif' alt='Smiley face' height='42' width='42'>";
Simple example with "press me" button that calls a function to change text
<html>
<script>
function changeText(){
document.getElementById("header").innerHTML = "changed text";
};
</script>
<body>
<div id="header">text</div>
<button onclick="changeText()">press me</button>
</body>
<html>
<script>
function changeText(){
document.getElementById("header").innerHTML = "changed text";
};
</script>
<body>
<div id="header">text</div>
<button onclick="changeText()">press me</button>
</body>
</html>
if querySelectorAll or getElementsbyClassName there are many ways to alter the text.
My answer is that you must think about your structure of the HTML Document.
You can use every ID only once. It is better to use data-lb="detail" etc. and classes for the div´s
Please see this not as an answer only as an tip.
You can try something like this -
<button id="click">
CLICK
</button>
<div class="header" id="textChange">Text</div>
And then in your JS -
$( "#click" ).click(function() {
$( "#textChange" ).replaceWith( "<h2>New heading</h2>" );
});
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 5 years ago.
Improve this question
I think I'm missing something stupidly simple but can't figure out why this isn't working. I'm trying to use 4 values from 4 text inputs and activate an alert when the values = the string value stated.
<div id="AnswersFriends">
<input type="text" align="center" id="TextFriend1" oninput="checkchange">
<input type="text" align="center" id="TextFriend2" oninput="checkchange">
<input type="text" align="center" id="TextFriend3" oninput="checkchange">
<input type="text" align="center" id="TextFriend4" oninput="checkchange">
</div>
<script type="text/javascript">
function checkchange(){
var Ans1 = document.getElementsByID('TextFriend1').value;
var Ans2 = document.getElementsByID('TextFriend2').value;
var Ans3 = document.getElementsByID('TextFriend3').value;
var Ans4 = document.getElementsByID('TextFriend4').value;
if(Ans1=="Joe" && Ans2=="Joe" && Ans3=="Hugo" && Ans4=="Nathan") {
alert("WellDone");
}
}
</script>
change this:
oninput="checkchange"
to this for all the input tags:
oninput="checkchange()"
Also, change this:
document.getElementsByID('TextFriend1').value;
to this:
document.getElementById('TextFriend1').value;
then, do the same for the other getElementById() methods.
To call a function you have to put () after its name
There is no function called getElementsByID, it is getElementById (with a singular element and a lower-case d on the end).
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 6 years ago.
Improve this question
I am trying to display the data of a div tag on a href click, the id is dynamically made. But the div tag is not responding. The sequence of the code is as below. The file is the .tpl file.
function editPickUpAddress(divId)
{
("#pickupAddressForm_"+divId).show();
}
<a href style="float:right;margin-top:-20px;margin-right:100px;" onclick="editPickUpAddress({$item.profile_id});">Edit</a>
<div id="pickupAddressForm_{$item.profile_id}" style="display:none">
//some content to display
</div>
After cleaning up your snippet and including jQuery, the code works as intended. Also note the href="#" which prevents the anchor tag from navigating to another page.
function editPickUpAddress(divId) {
$("#pickupAddressForm_" + divId).show();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Edit
<div id="pickupAddressForm_1" style="display:none">
//some content to display
</div>
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 6 years ago.
Improve this question
I am trying to clone a div without its value. Everything I've tried so far copies the value as well.
Here is my jQuery function
$('#add_more').click(function(){
$('#div_to_clone).clone().insertBefore('#add_more').find('input').val('');
});
This seems to be working fine for me:
$('#add_more').click(function() {
$('#div_to_clone').clone().insertBefore('#add_more').find('input').val('');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="div_to_clone">
<input type="text" />
</div>
Add more
Well, I recommend you changing your id to a class since the value of id attribute should be unique throughout the page. You might be getting the issue in some browser due to duplicate id.
$('#add_more').click(function() {
$('.div_to_clone:first').clone().insertBefore('#add_more').find('input').val('');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="div_to_clone">
<input type="text" />
</div>
Add more
Assuming that your html code is similar to this.
<div class="ContainerDiv">
<div id=ClonethisDiv><input class="InputTxtBox" type="text" /></div>
</div>
clone
Now,
$("body").on("click", "a", function() {
$("#ClonethisDiv").clone().appendTo(".ContainerDiv").find(".InputTxtBox").val("");
});
Hence on click, anchor tag u will able to get a copy of Div with Id='ClonethisDiv' and appended to the container Div.
Here while cloning(copy) input element with a class '.InputTxtBox', will be emptied and get copied. No worry! TextBox Values which already appended to container Div doesnot change.
Hope this will help you.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
i have the following html code:
<div class=imgHolder>
<img src="some address"/>
<a class="del" onClick="function">delete</a>
</div>
how find image tag in the parent's of by pure java script
Javascript:
function clickFunc(e){
var tgt = e.target;
var parent = tgt.parentNode;
var img = parent.getElementsByTagName("img")[0];
parent.removeChild(img);
}
HTML:
<div class=imgHolder>
<img src="some address"/>
<a class="del" onClick="clickFunc">delete</a>
</div>
I tried to write it as self explanatory, but a walk through:
e is the click event.
e.target is what the user clicked on (Your anchor tag)
parent is the parent node of the anchor.
img is the first image in the parent node.
Remove img from parent.
<div class=imgHolder>
<img src="some address"/>
delete
</div>
Script:
function deleteThis(sender){
var childs = sender.parentNode.childNodes;
for (var i = 0; i < childs.length; i++){
if (childs[i].tagName === 'img')
alert(childs[i].src);
}
}
OR, if you're sure img will be always before link.
function deleteThis(sender){
if (sender.previousSibling.tagName === 'img')
alert(sender.previousSibling.src);
}