Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I am kinda new to Javascript and Jquery and all I wanted to do is a simple test for a navigation bar. I am trying to figure out why my Jquery doesnt work at all...and when I erase my 2 first lines of Javascript, everything works fine...what the hell??? Someone can explain me why is it like this??
My html :
<div id="navbar">
<ul class="ulbar">
<li id="libar">a
<div id="navbar2"></div>
</li>
</ul>
</div>
My JS and Jquery (on same .js):
var buttonA = document.getElementById("libar");
var buttonB = document.getElementById("navbar2");
$(".libar").click(function(){
$(".navbar2").hide("slow", function() {
alert("test");
});
});
Thank you all
try
$(buttonA).click(function(){
$(".navbar2").hide("slow", function() {
alert("test");
});
});
You are gettin the dom elements BY ID first, and referencing later BY CLASS.
I guess you are not able to differentiate between the "class" and "id" attribute.
// IN JavaScript
var buttonA = document.getElementById("libar").value;
// Using jquery, you shall rewrite it as
var buttonA = $('#libar').val();
So in jquery "id" attribute of html elements are accessed by using "#" where as "class" attributes are access by using ".".
Hope that helps.
try this
var buttonA = document.getElementsByClassName("libar");
var buttonB = document.getElementsByClassName("navbar2");
instead of
var buttonA = document.getElementById("libar");
var buttonB = document.getElementById("navbar2");
I think you have class in your html, not id
OR
You need to add id in html
Related
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 1 year ago.
Improve this question
Many may ask why in the desire to see if it’s really needed. While undesirable it is for this particular use case which won’t detail since not relevant to the answer. It’s easily accomplished with a line of JQuery but alas needs to be plain js and ideally as short and straightforward as possible. See similar requests on SO but many for moving inside a div or with slightly more complex requirements.
Created a basic example that works as desired:
var contentDiv = document.querySelector('.c');
var anchorDiv = document.querySelector('.b');
contentDiv.after(anchorDiv);
<div class="container">
<div class="a">
A
</div>
<div class="b">
B
</div>
<div class="c">
C
</div>
</div>
When doing it on the real code however get the error:
TypeError: null is not an object (evaluating 'contentDiv.after')
While having the script at the top of the page can cause that, have it at the bottom, so is there anything else that might be causing that?
The actual code using is the following incase the specific class names are problematic?:
<script>
var contentDiv = document.querySelector('.product-description');
var anchorDiv = document.querySelector('.product-details__container');
contentDiv.after(anchorDiv);
</script>
Also thought maybe I need a document ready on that. So did:
<script>
document.addEventListener('DOMContentLoaded', function () {
var contentDiv = document.querySelector('.product-description');
var anchorDiv = document.querySelector('.product-details__container');
contentDiv.after(anchorDiv);
}, false);
</script>
But same error. Any ideas?
If you AJAX some of the page, you many not HAVE that element with that class at the time the code runs
Try this to see if it eventually works, then you know why
const swap = () => {
const contentDiv = document.querySelector('.product-description');
const anchorDiv = document.querySelector('.product-details__container');
if (contentDiv && anchorDiv) contentDiv.after(anchorDiv);
else {
console.log({contentDiv},{anchorDiv})
setTimeout(swap,1000)
}
};
window.addEventListener('load', swap);
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 6 years ago.
Improve this question
I am looking for a way to replace the text of all the links with an specific class, using javascript (not jquery). I would like all the links with that specific class, to have a generic text such as: "click here".
I would use getElementsByClassName to acquire an array of the links. You can then loop through these elements making any changes required.
Heres a Fiddle that also includes some validation to only chenge the text of anchor tags in case you use targetClass for anything else in other elements.
EDIT: looks like other beat me to it :-) (also fixing type in function)
var links = document.querySelectorAll(".yourclass");
for (var i=0; i<links.length; links++)
{
links[i].innerHTML = "click here";
}
This should do the trick. It's using ES6, so make sure you're using either Chrome Canary or a transpiler like Babel.
Say this is your markup...
<a class="classname" href="#">STUBBED</a>
<a class="classname" href="#">MOCKED</a>
<a class="classname" href="#">PLACEHOLDER</a>
This as your JS should work...
let refs = document.getElementsByClassName('classname');
refs = [].slice.apply(refs);
refs.forEach(ref => ref.innerHTML = 'click here');
function myFunction() {
var c = document.querySelectorAll(".example>a");
for(i=0;i<c.length;i++)
{
c[i].innerHTML = "Click Me!";
}
}
This should do the trick in pure javascript
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I am trying to remove script tag from Html Code using JavaScript.
Here is the HTML Code :
<script type='text/x-template-handlebars' id='carousel_ui_buttons_next-nav_next'>
<button class="next nav" asg-button>{{{button_text}}}</button>
</script>
I want to remove script tag so the remaining part would be html only.
I mean code should be changed inside browser.
it would be better if you provided us with the code you currently have to help you understand what happened rather than using the code copy/paste ,anyway to fire the js code you first decide when you want it to kick in
when the page finish loading ?
$(window).load(function() {
$('#carousel_ui_buttons_next-nav_next').remove();
});
or when the page is ready
$(document).ready(function($) {
$('#carousel_ui_buttons_next-nav_next').remove();
});
or if you prefer you can make it as a function and call it as much as
you want instead of repeating the same code over and over everywhere
function hideScript() {
$('#carousel_ui_buttons_next-nav_next').remove();
});
// then use it like //
$(document).ready(function($) {
hideScript();
});
the above code use JQuery which is much easier than vanilla js to understand and to work with.
The content of your <script> tag is invalid Javascript, but here is one possible way of achieving what you are after:
// Function to convert an HTML string to a DOM element
String.prototype.toDOM = function () {
var d = document,
i,
a = d.createElement('div'),
b = d.createDocumentFragment();
a.innerHTML = this;
while (i = a.firstChild) {
b.appendChild(i);
}
return b;
};
// The <script> we wish to replace
var st = document.getElementById('carousel_ui_buttons_next-nav_next');
// Replace it with the <button> that is inside of it
st.parentNode.replaceChild(st.innerHTML.trim().toDOM(), st);
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I have the following code
$var = hello;
echo "<a href='#".$var."' class='test'>Link</a>";
and I wanted that when I click on the link the href value shows up inside a div in the same page.
<div>
// result "#hello" showing up here
</div>
How can I do this ? Should I use POST and GET ?
Can you give me any example ?
Thanks
Firstly you need to set some ID or ClASS for this div, and after use just jQuery:
$(document).ready(function() {
$('.test').click(function() {
var attr = $('.test').attr('href');//here you take attribute and insert it into div
$('#divId').text(attr);
});
});
<div id="divId"></div> //here will be your href value
Try
$(".test").on('click', function() {
$("div#target").html($(this).attr('href') );
}
where target is the id of your div.
you can use jquery :
echo "<a href='#".$var."' class='test'>Link</a>";
$(document).ready(function(){
$('.test').click(function(e){//click event of link
var href = $('.test').attr('href');//get value of href
$("#my_div").html('href');//show value of href on div
return false;
});
});
Make the id of div :
<div id="my_div"></div>
If you use jQuery you can watch the hashchange event like this:
$(window).bind('hashchange', function() {
$('.mydiv').html(window.location.hash);
});
<div class="mydiv"></div>
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
Why does this work:
upButton.addEventListener('click', function(){player.up()}, false);
//downButton.addEventListener('click', function(){player.down()}, false);
but this doesn't work:
upButton.addEventListener('click', function(){player.up()}, false);
downButton.addEventListener('click', function(){player.down()}, false);
These are the buttons:
var upButton = document.getElementById('up');
var downButton = document.getElementById('down');
Right now the program just prints out "Hello World" to a canvas. When I add the event listener to the downButton, it won't print anything. The canvas appears but I don't see the "Hello World" message.
I am very confused. Thanks for the help.
Here is a link to the jsfiddle
http://jsfiddle.net/PPuCR/9/embedded/result/
Based on your fiddle, you have capitalized ID's for right and down. There are case sensitive. I filled in the blanks with a working fiddle: http://jsfiddle.net/guydog28/duYBu/
Your down button id is Down not down so use the below line
var downButton = document.getElementById('Down');
Note : id of an element is case-sensitive
Please consider respecting naming conventions "down" "Down".
Anyway, I think I fix it.
var upButton = document.getElementById('up');
var downButton = document.getElementById('down');
Here is the link : http://jsfiddle.net/PPuCR/15/embedded/result/
Have a nice day.