So, as you can see I amusing javascript to show/hide elements, however when you click the .png it shows the text but does not hide the other element's text. I have been going over and over this script and Google searching the hell out of it and I cannot come up with an answer. I think I need another pair of eyes, so if anyone takes a look at this let me know if there are errors or if I'm missing some code.
<html>
<head>
<meta name = "viewport" content = "initial-scale = 1.0, user-scalable = no" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="NKit.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript">
function showStuff(id) {
document.getElementById(id).style.display = 'block';
}
function hideStuff(id) {
document.getElementById(id).style.display = 'none';
}
</script>
</head>
<body>
<div class="content">
<section class="left">
<p>
<img src="character1.png" id="char1" />
</p>
<p>
<img src="character2.png" id="char2" />
</p>
</section>
<section class="right">
<span id="character1" style="display: none;">Show character1 information</span>
<span id="character2" style="display: none;">Character 2 information</span>
</section>
</div>
</body>
</html>
<a href="#" onclick="showStuff('character1');" onclick="hideStuff('character2');">
On this line, you first set the property onclick to showStuff('character1'), then you reassign it to hideStuff('character2').
So, you should wrap these two function calls into one function and then assign that function to onclick.
onclick="function() { showStuff('character1'); hideStuff('character2'); }
Related
My goal is to build a dynamic FAQ page where the questions are visible, and when you click on the said question the div with the answer would appear. Once you click the div again it would toggle again.
I've tried a few things and the best result I've accomplished was toggling the first question's answer regardless of what question was clicked.
<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<link href="./img/favicon.png" rel="shortcut icon"/>
<meta charset="utf-8"/>
<meta content="width=1280, maximum-scale=1.0" name="viewport"/>
<link th:href="#{css/faq.css}" rel="stylesheet" type="text/css"/>
<link th:href="#{css/faq-new.css}" rel="stylesheet" type="text/css"/>
</head>
<body style="margin: 0;
background: rgba(255, 255, 255, 1.0);">
<input id="anPageName" name="page" type="hidden" value="faq"/>
<div class="faq">
<th:block th:insert="_header.html :: header"></th:block>
<div class="rectangle2">
</div>
<div class="justaskus">
Just Ask Us
</div>
<!-------========= FAQ =========------------->
<div class="faq-container">
<div class="th-start" th:block th:each="faqType, stats : ${faqTypeDaoList}">
<div class="q-type-wrapper">
<div class="type-header">
<h4 th:text="${faqType.faqTypeName}"></h4>
</div>
<!----========= Question ========--------->
<div class="th-wrap" th:each="question, stat: ${faqTypeDaoList[_${stats.index}_].faqList}">
<a href="#">
<div id="box" class="question-box">
<div class="bullet"></div>
<img th:src="#{img/artboard-copy-3-unnamed-3#2x.png}" class="arrow"/>
<img th:src="#{img/artboard-copy-3-unnamed-13#2x.png}" class="unnamed" style="display:none;"/>
<div class="questions" th:text="${faqTypeDaoList[_${stats.index}].faqList[${stat.index}_].question}"></div>
<div id="answers" class="dropdown-answer" th:text="${faqTypeDaoList[_${stats.index}].faqList[${stat.index}_].answer}"></div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function() {
$('#box').on("click", ()=> {
$(this).children[3].toggle();
});
});
</script>
That is my current code and it does absolutely nothing. Here are a few attempts I took
/* One attempt */
$('.questions').on("click",function(){
// "this" in $(this) --> means the current clicked element
// .find() will search the CHILDREN of the clicked element with the class "sub-nav"
$(this).find("dropdown-answer").toggle();
});
/* Another attempt. This one toggled only the first question's answer regardless if what button was clicked. */
var click = document.getElementById("dropdown-answer");
if(click.style.display === "none") {
click.style.display = "block";
}
else {
click.style.display = "none";
}
Is this even possible?
find() will find children inside the element you provide (so in this case you put this in it so .questions) but your .dropdown-answer is not a child of that element.
you can write it like this
$(this " + .dropdown-answer").toggle();
Or place the element inside the .questions element and get it like this
$(this).find(".dropdown-answer").toggle();
I can't redirect to the next page. Please help me. I have a project due tomorrow. I've been trying for more than five hours. Please help me. I'm begging you guys. I don't know what I'm doing wrong. I'm very new to Javascript.
Please tell me what I'm doing wrong
document.getElementById("one").onclick = function() {
location.href = "lessons.html"
};
<!DOCTYPE html>
<html>
<head>
<title> MaxFluency Tutorials Page</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="tutorial.css">
</script>
</head>
<body>
<header>
<div class="topbar">
<center>
<p> Tutorials</p>
</center>
</header>
</div>
<div class="lessons">
<center>
<button class=les id=one type="button"> <h3> Lesson 1: </h3> Nature of Communication </button>
<button class=les id="2nd"> <h3>Lesson 2:</h3></button>
<button class="les" id="3rd"> <h3>Lesson 3:</h3></button>
</center>
</div>
<div class="nav">
<center><button class="loc"> Home</button>
<button class="loc"> Highscores </button>
<button class="loc"> Support us!</button>
</center>
</div>
<script type="text/Javascript" src="tutorials.js">
</script>
</body>
</html>
Your HTML is quite malformed, with some opening tags not closed anywhere, closing tags that do not have any matching tag, etc... This needs some tidying.
Also, if this Javascript code is in an external file, make sure it is wrapped in an onload event (making sure that all HTML elements actually loaded before calling document.getElementById). Finally, note the semicolon placement. You should place the semicolon after the statement, not after the function's ending }!
Side note: Why re-inventing the wheel when you can simply use an anchor tag (<a>) for redirecting?
onload = function() {
document.getElementById("one").onclick = function () {
console.log("clicked!");
location.href = "lessons.html";
}
}
<!DOCTYPE html>
<html>
<head>
<title> MaxFluency Tutorials Page</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="tutorial.css">
</head>
<body>
<header>
<div class="topbar">
<center> <p> Tutorials</p> </center>
</div>
</header> <!-- this closing tag was missing -->
<div class="lessons">
<center>
<button class=les id=one type="button" > <h3> Lesson 1: </h3> Nature of Communication </button>
<button class=les id="2nd"> <h3>Lesson 2:</h3></button>
<button class="les" id="3rd"> <h3>Lesson 3:</h3></button>
</center>
</div>
<div class="nav">
<center><button class="loc"> Home</button>
<button class="loc"> Highscores </button>
<button class="loc"> Support us!</button>
</center>
</div>
<script type="text/Javascript" src="tutorials.js"></script>
</body>
</html>
1) there is a lonely closing script tag in the head section.
2) your closing header and div tags before .lessons are in reverse order
3) Here is a fiddle that seems to be working. Button goes to a 404 just because the lessons.html doesn't exist here.
I also added a slash for a relative path. I assume you are probably working from a single root directory given that it is a tutorial but I could be wrong there.
location.href = "/lessons.html";
https://jsfiddle.net/y7txje5c/1/
I've been trying for quite a while to get my text to replace and it just hasn't been replacing anything no matter what I try. I've tried searching everywhere but I can't find an answer.
<html>
<head>
<meta charset="UTF-8">
<title>OnStream</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=0">
<link rel="stylesheet" href="https://onstreamvideo.github.io/css/style.css">
</head>
<script language="JavaScript">
function showInput() {
document.getElementById('display').innerHTML =
document.getElementById("sharingurl").value;
}
</script>
<script>
function fetchCorrections() {
var str = document.getElementById("sharingurl").innerHTML;
var res = str.replace(/www.google.com/g, "google");
document.getElementById("sharingurl").innerHTML = str;
}
</script>
<body onload="fetchCorrections();">
<header>
<h1>OnStream</h1>
</header>
</body>
<ul>
<li>
<form>
Dropbox Share Url:<br>
<input type="text" id="sharingurl" value="url"><br><br>
<input type="button" onclick="showInput();" value="Click"><br/>
<br>
</form>
</li>
</ul>
<ul>
<li>
<label>Your Input</label>
<p><span id='display'</span></p>
</li>
<ul>
</body>
</html>
I'm new to Stack Overflow and coding in general so please excuse my ignorance if I made a mistake. :)
EDIT:
Sorry guys, I'm tired and I've been working on this randomly throughout the day trying to pick up where I left off each time and I left a few errors in my code before posting. I tried cleaning up my code a little bit, and I've swapped the code above for the newer more clean code; if you see any mistakes feel free to let me know and just understand it was a clumsy mistake on my part. Thanks.
Try this out, it will work
<html>
<head>
<meta charset="UTF-8">
<title>OnStream</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=0">
<link rel="stylesheet" href="https://onstreamvideo.github.io/css/style.css">
</head>
<script language="JavaScript">
function showInput() {
document.getElementById('display').innerHTML =
document.getElementById("sharingurl").value;
}
function fetchCorrections() {
showInput();
var str = document.getElementById("sharingurl").value;
var res = str.replace(/blue/g, "red");
document.getElementById("sharingurl").value = res;
}
</script>
<body class="depiction">
<header>
<h1>OnStream</h1>
</header>
</body>
<body>
<ul>
<li>
<form>
Dropbox Share Url:
<br>
<input type="text" id="sharingurl" value="url">
<br>
<br>
<input type="button" onclick="fetchCorrections()" value="Click">
<br/>
<br>
</form>
</li>
</ul>
<ul>
<li>
<label>Your Input</label>
<p><span id='display' </p>
</li>
<ul>
</body>
</html>
Mistakes in your programs
Span with id= display is incomplete.
Input element doesn't have property like innerHTML.
You should use value property instead of innerHTML to assign value in input element.
multiple body tags.
And try to replace this function with fetchcorrection
function fetchCorrection(){
var str = document.getElementById("sharingurl").value;
var res = str.replace(/blue/g, "red");
document.getElementById("sharingurl").value = res;
}
I am a noob at Javascript, and I am trying to change a file link when I click on an anchor. Maybe I am going about this all wrong, but here it is. I want to change the PDF download link based upon the PDF I am displaying.
I have four links that are calling a file to populate the HTML object. The link I am trying to change is outside the object.
<div class="menu-item">Heywood White Wove</div>
<div class="menu-item">Heywood White Wove MI</div>
<div class="menu-item">Heywood Remittance</div>
<div class="menu-item">Heywood Booklets & Catalogs</div>
When I click on those links, I want the following href to change:
<span class="download-link">If your browser does not support viewing PDF's, please click<a class="download" href="#" id="pdfLink" download> HERE </a>to download a copy.</span>
Here I tried one link in Javascript, but it is not working because I do not know what I am doing.
document.getElementById("ww").onclick = function () {
document.getElementById("pdfLink").href = "/products/HeywoodWhiteWove.pdf";
return false;
};
Complete HTML:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta name="viewport" content="initial-scale=1.0">
<title>Heywood Envelopes</title>
<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/css/global.css">
<link rel="stylesheet" type="text/css" href="/css/products.css">
<script type="text/javascript" src="/js/popup.js"></script>
<script type="text/javascript" src="/js/merchant.js"></script>
<script type="text/javascript" src="/js/changeLink.js"></script>
</head>
<body>
<div class="include" data-include="/header.html"></div>
<div class="wrapper">
<div class="menu-container">
<div class="menu-item">Heywood White Wove</div>
<div class="menu-item">Heywood White Wove MI</div>
<div class="menu-item">Heywood Remittance</div>
<div class="menu-item">Heywood Booklets & Catalogs</div>
</div>
<div class="object-container">
<div class="download-link">
<span class="download-link">If your browser does not support viewing PDF's, please click<a class="download" href="#" id="pdfLink" download> HERE </a>to download a copy.</span>
</div>
<object class="pdf" data="/products/HeywoodWhiteWove.pdf" type="application/pdf" id="display" width="100%" height="100%"></object>
</div>
</div>
<div data-include="/footer.html"></div>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/load.js"></script>
<script>include();</script>
</body>
</html>
The code you provided should work. There is something else wrong on your page.
document.getElementById("ww").onclick = function () {
document.getElementById("pdfLink").href = "/products/HeywoodWhiteWove.pdf";
return false;
};
<div class="menu-item">Heywood White Wove</div>
<div class="menu-item">Heywood White Wove MI</div>
<div class="menu-item">Heywood Remittance</div>
<div class="menu-item">Heywood Booklets & Catalogs</div>
<span class="download-link">If your browser does not support viewing PDF's, please click<a class="download" href="#" id="pdfLink" download> HERE </a>to download a copy.</span>
There is a space in the string you want to set as href. Does that solve the problem?
I'm building a webpag in html. The image must change when I mouse over a div, but it does nothing. Anyone any idea?
<!doctype html>
<html>
<head>
<meta charset ="UTF-8"/>
<title>Oef 19.5</title>
<link href="19_5.css" rel="stylesheet"/>
<script>
function kleuren(veld)
{
var tshirt = document.getElementsByClassName("shirt");
tshirt.src=veld.id+".jpg";
}
</script>
</head>
<body>
<h1>Pick a color</h1>
<p><img class="shirt" src="gray.jpg"></p>
<div id="pink" class="roze" onmouseover="kleuren(this)"></div>
<div id="blue" class="blauw" onmouseover="kleuren(this)"></div>
<div id="brown" class="bruin" onmouseover="kleuren(this)"></div>
</body>
</html>
var tshirt = document.getElementsByClassName("shirt"); returns a collection of elements so access it like
tshirt[0].src=veld.id+".jpg"; //Since you have only one element with that class. If you have more, iterate over them