my objective is to have an image hidden until a button is pressed to then show the previously hidden image.
Right now I have an image in html with an Id of "yellowrose" that is hidden with this code:
<div id="yellowrose"><img src="https://i.imgur.com/ppfhZa6.jpg" style="visibility:hidden"></div>
In JS I have several things happening with the buttonx.onclick, but I can't seem to make the image visible. Here's my JS code:
var content = document.getElementById("content");
var buttonx = document.getElementById("show-more");
let yellowrose = document.getElementById("yellowrose");
window.onload = function(){
buttonx.onclick = function () {
document.getElementById("yellowrose").style.visibility="visible";
if(content.className == "open") {
//shrink the box
content.className = "";
buttonx.innerHTML = "Continue to the Sunlit Pavillion?";
} else{
//expand the box
content.className = "open";
buttonx.innerHTML = "As you wander through the garden grounds you notice a striking Yellow Rose";
}
}
}
Do you have any suggestions on how I can make the "yellowrose" image visible through the buttonx.onclick function? Thank you.
An id cannot contain a space.
As per MDN:
id's value must not contain whitespace (spaces, tabs etc.). Browsers treat non-conforming IDs that contain whitespace as if the whitespace is part of the ID. In contrast to the class attribute, which allows space-separated values, elements can only have one single ID value.
Additionally, you are setting the visibility of #yellowrose, the container of the image, and not the image itself. To solve this, simply get the firstChild property:
var content = document.getElementById("content");
var buttonx = document.getElementById("showmore");
let yellowrose = document.getElementById("yellowrose");
window.onload = function() {
buttonx.onclick = function() {
document.getElementById("yellowrose").firstChild.style.visibility = "visible";
if (content.className == "open") {
//shrink the box
content.className = "";
buttonx.innerHTML = "Continue to the Sunlit Pavillion?";
} else {
//expand the box
content.className = "open";
buttonx.innerHTML = "As you wander through the garden grounds you notice a striking Yellow Rose";
}
}
}
.open{
visibility:visible !important;
}
<div id="yellowrose"><img src="https://i.imgur.com/ppfhZa6.jpg" style="visibility:hidden"></div>
<button id="showmore">Show More</button>
<div id="content">
content
</div>
Related
I have a working grid that show a cell for every title in the json:
async function loop_iteration(json, i, arr) {
arr.push(`<a onClick="show()" class="cell" id=${i}"><div >${json[i].title}</div> </a>`)
arr.push(`<div class="info" id=${i}>${json[i].title}<br><br><br><br><br>Game Size: ${json[i].size}<br><br>Last Update: ${json[i].date}</div>`)
}
I want to show on click of the class info.
The problem is that it gives always the same title(first), it's like is always the first cell to be clicked
I show the info div like this:
<script>
function showinfo() {
var node = document.querySelector('.cell.info')
var visibility = node.style.visibility;
node.style.visibility = visibility == "visible" ? 'hidden' : "visible"
}
</script>
while if i show the div using this:
function show(){
var divsToHide = document.getElementsByClassName("info");
for(var i = 0; i < divsToHide.length; i++)
{
divsToHide[i].style.visibility="visible";
}
//document.getElementsByClassName('info')['${i}'].style.visibility = 'visible';
}
happen something strange, the div showed is not the first but is like it show all the div
Thanks for any help.
I find out the problem.
It was the javascript, so i extract the id and then iterate the class with the id
function show(clicked_id){
clicked_id = parseFloat(clicked_id);
document.getElementsByClassName('info')[clicked_id].style.visibility = 'visible';
}
I have a contenteditable div (with id 'editor1') that allows users to input text. There is then a function that allows them to color any highlighted text. My js uses window.getSelection().getRangeAt(0), but the issue with this is that they can highlight words outside of the div and their color will change as well. So far; I've tried:
function red(){
{
var getText = document.getElementById("editor1").innerHTML;
var selection = getText.getSelection().getRangeAt(0);
var selectedText = selection.extractContents();
var span = document.createElement("span");
span.style.color = "red";
span.appendChild(selectedText);
selection.insertNode(span);
}
}
Fiddle: https://jsfiddle.net/xacqzhvq/
As you can see, if I highlight "this will become red as well", I can use the button to make that red too.
How can I only color the highlighted text only within the editor1 div?
You are able to get the node element from the selection using .baseNode. From there you can get the parent node and use that for comparison.
function red(){
// If it's not the element with an id of "foo" stop the function and return
if(window.getSelection().baseNode.parentNode.id != "foo") return;
...
// Highlight if it is our div.
}
In the example below I made the div have an id that you can check to make sure it's that element:
Demo
As #z0mBi3 noted, this will work the first time. But may not work for many highlights (if they happen to get cleared). The <span> elements inside the div create a hierarchy where the div is the parent elements of many span elements. The solution to this would be to take traverse up through the ancestors of the node until you find one with the id of "foo".
Luckily you can use jQuery to do that for you by using their .closest() method:
if($(window.getSelection().baseNode).closest("#foo").attr("id") != "foo") return;
Here is an answer with a native JS implemented method of .closest().
Are you looking for this,
//html
<body>
<p id='editor1'>asdf</p>
<button onclick='red()'>
RED
</button>
</body>
//JavaScript
window.red = function(){
//var getText = document.getElementById("editor1").innerHTML;
var selection = window.getSelection().getRangeAt(0);
var selectedText = selection.extractContents();
var span = document.createElement("span");
span.style.color = "red";
span.appendChild(selectedText);
selection.insertNode(span);
}
Plunker: https://plnkr.co/edit/FSFBADoh83Pp93z1JI3g?p=preview
Try This Code :
function addBold(){
if(window.getSelection().focusNode.parentElement.closest("#editor").id != "editor") return;
const selection = window.getSelection().getRangeAt(0);
let selectedParent = selection.commonAncestorContainer.parentElement;
let mainParent = selectedParent;
if(selectedParent.closest("b"))
{
//Unbold
var text = document.createTextNode(selectedParent.textContent);
mainParent = selectedParent.parentElement;
mainParent.insertBefore(text, selectedParent);
mainParent.removeChild(selectedParent);
mainParent.normalize();
}
else
{
const span = document.createElement("b");
span.appendChild(selection.extractContents());
selection.insertNode(span);
mainParent.normalize();
}
if (window.getSelection) {
if (window.getSelection().empty) { // Chrome
window.getSelection().empty();
} else if (window.getSelection().removeAllRanges) { // Firefox
window.getSelection().removeAllRanges();
}
} else if (document.selection) { // IE?
document.selection.empty();
}
};
<div id="editor" contenteditable="true">
You are the programmers of the future
</div>
<button onclick="addBold()">Bold</button>
I got the code and added my edits from those following answers :
Bold/unbold selected text using Window.getSelection()
getSelection().focusNode inside a specific id doesn't work
I'm trying to have a login / create account on 1 page, stacked ontop of eachother.
But when you click on the button for "login" or "create account", then it has to hide the opposing one.
So far, I've tried this, without succes.
<script>
var toggle = function() {
var mydiv1 = document.getElementById('leftContent');
var mydiv3 = document.getElementById('leftTitle');
mydiv2.style.display = 'hidden';
mydiv4.style.display = 'hidden';
mydiv3.style.display = 'block';
mydiv1.style.display = 'block';
}
var toggle2 = function() {
var mydiv2 = document.getElementById('leftContent2');
var mydiv4 = document.getElementById('leftTitle2');
mydiv2.style.display = 'block';
mydiv4.style.display = 'block';
mydiv3.style.display = 'hidden';
mydiv1.style.display = 'hidden';
}
</script>
the mydivs equal 4 divs with 2 of each subject "login" & "create account".
you'd say, why 4 instead of 2, it's because there are also 2 different divs for the titles above them.
I hope you guys can help me out :)
I don't mind trying something entirely different, but i'm hoping to stay away from jquery, and keep it # just pure js.
Use display:none
or
style.display = 'none'
Then it will get work !
I'm using Javascript to look for "#mode2" in the URL and if so, it will produce a different colored image with canvas. That part of the script is working fine. The issue is in the script that produces the toggle hyperlink. It will toggle the first time correctly (which makes sense as its a different part of the script) and then will toggle either once or twice depending on where it starts.
I.E. Blue is the default, so if the page loads on blue, it will toggle orange and then back to blue and then won't work, where as if its on orange it will just toggle to blue and then won't work.
I know its probably some stupid error in my code but I can't find it so if someone could help me out I would appreciate it a lot.
<script type="text/javascript">
function toggle(blue){
if (blue == 0) {
blue = 1;
}
else if (blue == 1) {
blue = 0;
}
if (blue == 0){
var container = document.getElementById("navi");
var content = 'back';
container.innerHTML= content;
}
else{
var container = document.getElementById("navi");
var content = 'back';
container.innerHTML= content;
}
}
var pathArray = document.URL;
if (pathArray.indexOf("mode2") != -1){
var blue = 0;
var container = document.getElementById("navi");
var content = 'back';
container.innerHTML= content;
}
else{
var blue = 1;
var container = document.getElementById("navi");
var content = 'toggle colors - back';
container.innerHTML= content;
}
</script>
Instead of this (for all occurrences):
onclick="toggle(blue);"
do this:
onclick="toggle('+blue+');"
Here is a fiddle: http://jsfiddle.net/YF4Nc/1/
I have got a small javascript function and a piece of html code where i have a button, and I want that whenever user hovers that button, a little box to appear.Everything seems to be working great,despite that my function executes only after I hover that button for the 2 time(after the page has just loaded and I try to use my function for the 1 time, later everything executes after a firs hover).So what can I do about it?
HTML code
<body>
<div id = "searchBox">
<p id = "paragraph"><input type = "text" name = "serachBar"/>
<input type = "button" value = "szukaj" name = "search"/>
</p>
<div id = "searchButton">Szukaj</div>
</div>
</body>
and javascript itself
<script type = "text/javascript">
function popUp(menu){
var searchBox = document.getElementById(menu).style;
var searcButton = document.getElementById('searchButton');
if(!searchBox || searchBox.display == "none"){
searchBox.display = "block";
}
else {
searchBox.display = "none";
}
};
</script>
Change your if statement like this:
function popUp(menu) {
var searchBox = document.getElementById(menu);
var searcButton = document.getElementById('searchButton');
if (searchBox) {
if(searchBox.style.display == ""){
searchBox.style.display = "block";
}
else {
searchBox.style.display = "";
}
}
};
The original value will be "" instead of "none".
I'm making the assumption that the CSS setting is to display:"none".
I also moved the searchBox condition. If it isn't found, you don't want to set properties at all.
<p> is a flow element and can't contain <input>s.
Besides, your function instructs to toggle hidden state, rather than show box on mouseover. Therefore, the box will hide on first hover, and reappear on the second one.
You probably want to define mouseover and mouseout event listeners.