Can you create a spoiler using just JavaScript and not Jquery? [closed] - javascript

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 9 years ago.
Improve this question
I am learning Javascript right now, and I under stand its all client side and does not store information like php. I also have seen spoiler codes and all the ones I have seen use jquery. When I use the word "Spoiler" I am referencing something you click to open information ( usually a plus sign) and then to remove the hidden information from view you click it again ( usually its a minus sign). I was wondering if it would be possible to create a spoiler just using Javascript and nothing else, and if it is possible a small example.

Yes it's entirely possible. You just need to access your events and elements through native javascript. If you can provide an example of what you're trying to do I can give you some better sample code to get the job done.
<head>
<script>
docReady = function() {
var spoilers = document.getElementsByName('spoiler');
for(var s = 0; s < spoilers.length; s++) {
spoilers[s].onclick = function(e) {
// Prevent the default link action
e.preventDefault();
// Show the parent element's next sibling
var spoilerText = this.parentNode.nextSibling;
spoilerText.style.display = 'block';
}
}
}
// Attach docReady function to DOMContentLoaded
// (Works in Firefox/Chrome/Safari)
document.addEventListener("DOMContentLoaded", docReady, false);
</script>
</head>
<body>
<div id="stories">
<p>This is the storySpoiler</p><
p style="display:none">Spoiler Text</p>
<p>This is the storySpoiler</p><
p style="display:none">Spoiler Text</p>
</div>
</body>
A quick point of advice: learn to use console.log, it will be your best friend with native javascript.
Also, if you're wondering why I broke the paragraph line after the opening bracket of the second paragraph it's an issue with the nextSibling method. For the sake of brevity I used simple javascript methods in the example. You can read about the nextSibling issue here.

Related

get multiple Elements By Tag Name in JavaScript? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
Hello there am trying to make an image gallery for example lets say that I have multiple images and I want to change their opacity when I hover over them by using JavaScript I know that this is possible with CSS but am trying to accomplish this with JavaScript I tried using get Elements By Tag Name method but the problem it just can access one element by time so can I do that thanks
Try this:
var elements = document.getElementsByTagName("img");
Array.prototype.forEach.call(elements, function (e) {
// Here you can access each image individually as 'e'.
});
When you hover, get the ID of that image. Then loop through all images (example above) and set their opacity. If the element is equal to the one you clicked on (remember, you just took the ID so you can use it), just skip to the next one using continue;.
you have to collect you image elements like
var images = document.getElementsByTagName("img");
then you have to do like
Array.prototype.forEach.call(images, e => e.addEventListener("mouseover", function( event ) { do something}));

Does anyone know which script would cause placeholder text to be removed from text inputs and put into spans? [closed]

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 8 years ago.
Improve this question
I have a page that I added to a project that was already underway, and when I added the masterpage, it was given a whole bunch of scripts. Among these scripts is something that is messing with the styles on my page.
There are several different bugs, but the two biggest things are
It moves my placeholder text into external spans, and these spans are all positioned wrong.
It is adding a keypress function to my searchbar that goes to the wrong place.
The thing is, it looks like I have about 20 scripts on the page thanks to the masterpage, so I don't know where to even start putting breakpoints.
Is there any simple way I can find out which scripts are responsible for doing these weird things? Does anyone know of a specific script that would cause that placeholder text issue?
If you haven't tried out the break on dom attribute modification in chrome dev tools or don't have chrome installed. or it might be an IE specific Then you could do it with plain javascript by monkey patching the setter method with object.defineProperty
If it is using setAttribute("placeholder", "") or removeAttribute("placeholder") try monkey patching that one instead.
here is an example:
// select the target node
var target = document.querySelector('input');
// change the setter method
Object.defineProperty(target, 'placeholder', {
set: function(newValue) {
// log the code that made the change
throw (new Error()).stack;
}
});
function updateDom() {
changeInput();
}
function changeInput() {
target.placeholder = ""
}
setTimeout(updateDom, 100);
<input id="input" type="text" placeholder="foo">
if that doesn't help cuz it's a deep minified jQuery hook that doesn't trace back to your code, than you only choice is to "cut and trace"

javascript select by CSS and toggle display [closed]

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 8 years ago.
Improve this question
I'm a javascript newbie so go easy on me. I'm wanting to select a bunch of text that is identifiable only by inline CSS (not classes or ids or anything), and create a toggle that turns it on and off. So -- find everything with backgroundColor = '#eed6b4' and toggle display='none' / 'inline-block'
Needing the javascript and html... thx
=====================
This is what I tried originally:
<script type="text/javascript">
function toggleVisibility() {
var codeNum = document.getElementsByClassName('syntaxHighlightingPlugin');
i = codeNum.length;
while(i--) {
codeNum[1].style.backgroundColor = '#eed6b4';
if(codeNum.style.display == 'inline-block')
codeNum.style.display = 'none';
else
codeNum.style.display = 'inline-block';
}
}
</script>
<button type="button" onclick="toggleVisibility();"> Hide numbers (for copying) </button>
Oh, and as I replied to a comment, the twist on this is that it's for text rendered by a TWiki plugin, so I have no control over the resulting CSS --- which, as I said, has no classes --- also, since it's rendered, I think I may need to use something like getComputedStyle (?).
It's generally bad practice to use inline css, and to make your Javascript dependant on that inline CSS is also not a good idea. However, if you wanted to select an element based on the value of an attribute, you can use the attribute value selector like this:
$("[style='backgroundColor *= #eed6b4']").hide();
Reminder: This uses jQuery.
You could set a class to that background color and then filter by class name $(".classname").
OR
You could add a new selector like explained here:
Is there a style selector in jQuery?
Not necessarily a great idea, but you could add a new Sizzle selector for it:
$.expr[':'].width = function(elem, pos, match) {
return $(elem).width() == parseInt(match[3]);
}
which you could then use like so:
$('div:width(970)')
//That's going to be horrifically slow, though, so you'd want to narrow down on the number >of elements you're comparing with something like :
$('#navbar>div:width(970)')
//to only select those divs that are direct descendants of the navbar, which also have a >width of 970px.

GetElementByClass of An Element Within Another Element [closed]

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 need to get the element by class of "balls" from the div gameContent.
Basically grabbing the lottery numbers from Play4 from this site:
http://www.flalottery.com/play4.do
How can I get the element by class from another class? If I just do balls, all of the numbers show up, which aren't relevant and would mess up data.
Do you mean something like this:
document.getElementsByClassName('gameContent')[0].getElementsByClassName('balls')
Get elements by class "gameContent" followed by "balls". Query assumes that the first gameContent is what we are interested in.
Hope this helps.
you can use the following query selector
var elems = document.querySelectorAll(".gameContent .balls")
That is pure JavaScript. You can of course use the same query selector for jQuery
For instance with jQuery this would be
var elems = $(".gameContent .balls")
Notice how the query selector is identical.
Did you try
$(".gameContent .balls")
Judgeing by the page you've included in your question, you'll probably want to iterate through the <span> elements to get each ball number:
$('.gameContent .balls').each(function(){
alert('next ball: '+$(this).html())
});

How to change HTML code inside of a div with javascript? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions must demonstrate a minimal understanding of the problem being solved. Tell us what you've tried to do, why it didn't work, and how it should work. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I am building a HTML site & that site has too many pages. So I want a code so that I can edit a particular div from my website so it will apply to all over in my website.
For eg.
In HTML >>
<div id="special-id"> I want to change or place anything [HTML code also] inside of this div with javascript </div>`*
& in javascript >>
<script type="text/javascript">
????
</script>
Please need help so that I can move to my HTML website again.
I want to change a content that may be simple text or a javascript code or HTML code?
document.getElementById('special-id').innerHTML = "Whatever you want to replace with";
The easy way:
first, get your element with e.g. getElementById, then set innerHTML to your new code.
var div = document.getElementById('special-id');
div.innerHTML = '<span>hello world</span>';
The DOM method only way:
create your new HTML nodes using document.createElement or document.createTextNode and then append them to your element with appendChild.
// assuming `div` as above
var newNode = document.createElement('span');
span.appendChild(
document.createTextNode('hello world')
);
div.appendChild(span);

Categories