I have a button within my code that should change the text 'hello' to 'Goodbye' but it doesn't work. What mistake have I made? My code is correctly indented in my coding program.
Here is my code:
<!doctype html>
<html>
<head>
<title>chat</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
body {
margin:0px;
}
#topBar {
background-color:#33ccff;
width:100%;
height:100px;
z-index:1;
margin:0px;
padding:0px;
position:fixed;
}
'#logo' is the ID of the div that holds the text that I want to change and '#loginbutton' is the button that I want to use.
#logo {
width:15%;
height:60px;
float:left;
background-color:white;
margin-left:20px;
margin-top:20px;
}
#login {
width:10%;
height:60px;
float:right;
margin-right:20px;
margin-top:20px;
border-radius:8px;
}
#loginbutton { --this is the button that I want to change the text with
background-color: #lightgrey;
border: none;
color: white;
text-align: center;
text-decoration: none;
font-size: 30px;
cursor: pointer;
width:100%;
height:60px;
border-radius:10px;
font-family:Impact;
line-height:60px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
}
#loginbutton:hover {
background-color: black;
color: white;
box-shadow: 2px 2px 2px rgba(0,0,0,0.24), 2px 2px 2px 2px rgba(0,0,0,0.19);
}
</style>
</head>
<body>
<div id="topBar">
Here is the button and the div with the text:
<div id="login">
<button id="loginbutton">LOG IN</button> <!--This is the button-->
</div>
<div id="logo">hello</div> <!--This is the text I am trying to change-->
</div>
Here is my JavaScript code that I was using:
<script type="text/javscript">
document.getElementById("loginbutton").onclick=function {
document.getElementById("logo").innerHTML="Goodbye";
}
</script>
</body>
</html>
you need to specify () for the function which is missing in this case.
<script type="text/javscript">
document.getElementById("loginbutton").onclick=function() {
document.getElementById("logo").innerHTML="Goodbye";
}
</script>
I recommend using an event listener instead, to add your click handler
<script type="text/javscript">
document.getElementById("loginbutton").addEventListener('click', function(e) {
document.getElementById("logo").innerHTML = "Goodbye";
});
</script>
Update
Your existing code has a syntax error making it not work properly, where it is missing the parenthesis () after the word function and should look like this
document.getElementById("loginbutton").onclick=function() {
It should be
<script type="text/javscript">
document.getElementById("loginbutton").onclick = function() {
document.getElementById("logo").innerHTML = "Goodbye"; }
//further code
</script>
The spelling text/javscript is not correct. Correct the spelling and then add () after the function word.
See the corrected code snippet below:
<script type="text/JavaScript">
document.getElementById("loginbutton").onclick=function() {
document.getElementById("logo").innerHTML="Goodbye";
}
</script>
Related
So, I'm messing with a photo gallery lightbox effect. It's very simple and jerry-rigged but for some reason the other images won't disappear when I click on the one I want to enlarge even though the function I made should set everything that isn't the clicked on image hidden. It works the first time but every subsequent time, no matter which of the two images I click on, the other remains there.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Lightbox Effect</title>
<link rel="stylesheet" href="Style.css">
<script src="Java.js"></script>
</head>
<body>
<div class="lightbox">
<main>
<div class="X" onclick="goBack()">X</div>
<img class="woods1" onclick="bigPic1()" src="Images/Woods1.jpg">
<img class="woods2" onclick="bigPic2()" src="Images/Woods2.jpg">
<img src="Images/Woods5.jpg">
<img src="Images/Woods6.jpg">
</div>
</main>
</body>
</html>
CSS:
main div{
width:50px;
height:50px;
border:1px solid white;
position:fixed;
right:1px;
visibility:hidden;
}
main a{
text-decoration:none !important;
font-size:450%;
position:relative;
top:-20px;
left:2px;
color:white;
}
main img{
margin:20px 0px 0px 50px;
max-width:20%;
height:auto;
display:inline-block;
border:1px solid #ddd;
border-radius:4px;
padding:5px;
overflow:hidden;
}
Javascript:
var pics=document.getElementsByClassName('woods1')
var light=document.getElementsByClassName('lightbox')
var body=document.getElementsByTagName('body')
var close=document.getElementsByClassName('X')
var pics2=document.getElementsByClassName('woods2')
function bigPic1(){
light[0].style.visibility="hidden";
body[0].style.background="black";
pics[0].style.visibility="visible";
close[0].style.visibility="visible";
pics[0].style.transform="scale(2.5)";
}
function bigPic2(){
light[0].style.visibility="hidden";
body[0].style.background="black";
pics2[0].style.visibility="visible";
close[0].style.visibility="visible";
pics2[0].style.transform="scale(2.5)";
}
function goBack(){
light[0].style.visibility="visible";
body[0].style.background="none";
close[0].style.visibility="hidden";
pics[0].style.transform="scale(1)";
pics2[0].style.transform="scale(1)";
}
I am trying to get a JavaScript listener to work but nothing changes.
Here is the full code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#trigger {
padding: 20px;
background-color: red;
border: 1px solid white;
width: 100px;
cursor: pointer;
}
#box {
padding: 20px;
background-color: green;
border: 1px solid white;
width: 100px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="trigger">Click Here</div>
<div id="box">
content should change
</div>
<script type="text/javascript">
document.addEventListener("click", () => {
document.getElementById("trigger"), () => {
document.getElementById("box").innerHTML = "New Box Text";
}
});
</script>
</body>
</html>
I know I can do this using jQuery, but I want to do it with just pure, vanilla JavaScript.
When I click on #trigger, #box text is not changing. What I'm I doing wrong?
In order to run your code only, when the DOM completely loaded and parsed, add an evenet listener under the DOMContentLoaded event, then use querySelector to select the element with the #trigger id, then add a click event listener to it and use querySelector again to select the element with #box id and modify its .innerHTML accordingly:
document.addEventListener('DOMContentLoaded', () => {
document.querySelector("#trigger").addEventListener('click', () => {
document.querySelector("#box").innerHTML = "New Box Text";
});
});
The great thing about using querySelector and also querySelectorAll is that they provide a similar functionality compared to jQuery, when selecting elements.
Example:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#trigger {
padding: 20px;
background-color: red;
border: 1px solid white;
width: 100px;
cursor: pointer;
}
#box {
padding: 20px;
background-color: green;
border: 1px solid white;
width: 100px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="trigger">Click Here</div>
<div id="box">
content should change
</div>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', () => {
document.querySelector("#trigger").addEventListener('click', () => {
document.querySelector("#box").innerHTML = "New Box Text";
});
});
</script>
</body>
</html>
Add the listener to the box element rather than the entire page:
document.getElementById("trigger").addEventListener("click", () =>
document.getElementById("box").innerHTML = "New Box Text"
);
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#trigger {
padding: 20px;
background-color: red;
border:1px solid white;
width: 100px;
cursor: pointer;
}
#box {
padding: 20px;
background-color: green;
border:1px solid white;
width: 100px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="trigger">Click Here</div>
<div id="box">
content should change
</div>
</body>
</html>
This is my blog - http://quickeasycoder.blogspot.com/2018/07/code-player.html
It is not working as same as it was working in my browser. Every section up there in the blog come and merge upon each other.
This is working perfectly in my Google Chrome but it's not the case when I have uploaded it to my Blogger post. I think code is perfect but the thing may be in the layout of the blog. What should be done now?
<html>
<head>
<title>jQuery</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<style type="text/css">
body {
font-family: sans-serif;
padding:0;
margin:0;
}
#header {
width:100%;
background-color: #EEEEEE;
padding:5px;
height: 30px;
}
#logo {
float:left;
font-weight: bold;
font-size: 120%;
padding: 3px 5px;
}
#buttonContainer {
width:233px;
margin: 0 auto;
}
.toggleButton {
float:left;
border: 1px solid grey;
padding: 6px;
border-right: none;
font-size: 90%;
}
#html {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
#output {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-right: 1px solid grey;
}
.active {
background-color: #E8F2FF;
}
.highlightedButton {
background-color: grey;
}
textarea {
resize: none;
border-top: none;
border-color: grey;
}
.panel {
float:left;
width: 50%;
border-left: none;
}
iframe {
border:none;
}
.hidden {
display: none;
}
#intro{margin:10px;
font-weight:bold;
font-size: 20px;
}
</style>
</head>
<body>
<p id="intro"> Learn HTML| CSS| JAVASCRIPT without any text-editor by using Code-Player <br>
Built using HTML| CSS| JAVASCRIPT| jQuery</p>
<div id="header">
<div id="logo">
CodePlayer
</div>
<div id="buttonContainer">
<div class="toggleButton active" id="html">HTML</div>
<div class="toggleButton" id="css">CSS</div>
<div class="toggleButton" id="javascript">JavaScript</div>
<div class="toggleButton active" id="output">Output</div>
</div>
</div>
<div id="bodyContainer">
<textarea id="htmlPanel" class="panel"> <p id="paragraph">Hello World!</p></textarea>
<textarea id="cssPanel" class="panel hidden"> p { color: green; }</textarea>
<textarea id="javascriptPanel" class="panel hidden">document.getElementById("paragraph").innerHTML = "Hello Rob!";</textarea>
<iframe id="outputPanel" class="panel"></iframe>
</div>
<script type="text/javascript">
function updateOutput() {
$("iframe").contents().find("html").html("<html><head><style type='text/css'>" + $("#cssPanel").val() + "</style></head><body>" + $("#htmlPanel").val() + "</body></html>");
document.getElementById("outputPanel").contentWindow.eval($("#javascriptPanel").val());
}
$(".toggleButton").hover(function() {
$(this).addClass("highlightedButton");
}, function() {
$(this).removeClass("highlightedButton");
});
$(".toggleButton").click(function() {
$(this).toggleClass("active");
$(this).removeClass("highlightedButton");
var panelId = $(this).attr("id") + "Panel";
$("#" + panelId).toggleClass("hidden");
var numberOfActivePanels = 4 - $('.hidden').length;
$(".panel").width(($(window).width() / numberOfActivePanels) - 10);
})
$(".panel").height($(window).height() - $("#header").height() - 15);
$(".panel").width(($(window).width() / 2) - 10);
updateOutput();
$("textarea").on('change keyup paste', function() {
updateOutput();
});
</script>
</body>
</html>
Since a lot of blog platforms prohibit embedding code sometimes you are able to accomplish the task by using an <iframe> similar to what is here
<iframe height='265' scrolling='no' title='BPaNNq' src='//codepen.io/happymacarts/embed/BPaNNq/?height=265&theme-id=0&default-tab=html,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/happymacarts/pen/BPaNNq/'>BPaNNq</a> by Joseph L. Bradfield (<a href='https://codepen.io/happymacarts'>#happymacarts</a>) on <a href='https://codepen.io'>CodePen</a>.
or something like this one i found (looks familiar)
<iframe height='265' scrolling='no' title='Code player' src='//codepen.io/akashdevgan/embed/JGbGOQ/?height=265&theme-id=0&default-tab=css,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/akashdevgan/pen/JGbGOQ/'>Code player</a> by Akash Devgan (<a href='https://codepen.io/akashdevgan'>#akashdevgan</a>) on <a href='https://codepen.io'>CodePen</a>.
I don't think that it works to embed in the snippet here but this might work on your blogger site try it out
As I couldn't debug yours, wrote my own version of codeplayer.
You may need to refer these. Make HTML elements as contenteditable, CSS Custom Variables
$(document).ready(function(){
$(".body").get(0).style.setProperty("--contentwidth", 100/$(".active").length+"%");
$(".codetype").click(function(){
$(this).hasClass("active") ? $(this).removeClass("active") : $(this).addClass("active");
$(".codecontent").eq($(this).index()).toggle();
$(".body").get(0).style.setProperty("--contentwidth", 100/$(".active").length+"%");
});
});
.container
{
width:100%;
height:400px;
max-height:400px;
border:1px solid black;
}
.header
{
position:relative;
width:100%;
height:50px;
background: red;
box-sizing: border-box;
text-align:center;
color:white;
}
.codetype
{
border:1px solid black;
width:100px;
height:40px;
margin:0 auto;
display:inline-block;
}
.codetype > span
{
text-align:center;
line-height:40px;
}
.codetype:first-child
{
border-top-left-radius:4px;
border-bottom-left-radius:4px;
}
.codetype:last-child
{
border-top-right-radius:4px;
border-bottom-right-radius:4px;
}
.body
{
height:100%;
display:inline-block;
width:100%;
}
.codecontent
{
height:100%;
width:var(--contentwidth);
background:yellow;
border:1px solid black;
float:left;
box-sizing:border-box;
}
.active
{
background:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="header">
<div id="" class="codetype active"><span>HTML</span></div>
<div id="" class="codetype active"><span>CSS</span></div>
<div id="" class="codetype active"><span>JS</span></div>
<div id="" class="codetype active"><span>Output</span></div>
</div>
<div class="body">
<div id="" class="codecontent" contenteditable=true>HTML</div>
<div id="" class="codecontent" contenteditable=true>CSS</div>
<div id="" class="codecontent" contenteditable=true>JS</div>
<div id="" class="codecontent">Output</div>
</div>
</div>
2 part question.
So I want to be able to click the square at the middle which should slide the top left box to the right horizontally, and the top right box will slide to the bottom vertically, etc.
Duration being 2 seconds for the slide.
$(document).ready(function(){
$("#container").click(function(){
$("#box1, #box3").switchClass("horizontal", "newVertical", 1000);
$("#box2, #box4").switchClass("vertical", "newHorizontal", 1000);
});
});
in Fiddle animation is running. Does NOT run in chrome or firefox. Am I using the correct cdn?
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Cie Studios | Solution</title>
<!--Stylesheet-->
<link rel="stylesheet" href="ciestyle.css">
</head>
<body>
<section id="main">
<div id="container">
<div class="horizontal" id="box1">1</div>
<div class="vertical" id="box2">2</div>
<div class="vertical" id="box3">3</div>
<div class="horizontal" id="box4">4</div>
</div>
<label>Fig 1.2</label>
</section>
<!--Google JQuery Lib -->
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<!--Javascript -->
<script src="ciescript.js"></script>
</body>
</html
CSS
* {
margin:0px auto;
}
#main {
height:100%;
width:100%;
margin-top:20%;
text-align:center;
}
#container {
display:block;
border:1px solid #000;
background-color:#333333;
height:151px;
width:151px;
}
.horizontal {
width:100px;
height:50px;
}
.vertical {
width:50px;
height:100px;
}
.newHorizontal {
width:100px!important;
height:50px!important;
float:left!important;
border:0px!important;
}
.newVertical {
width:50px!important;
height:100px!important;
float:right!important;
border:0px!important;
}
#box1, #box3 {
float:left;
}
#box2, #box4 {
float:right;
}
#box1 {
background-color:#ffffff;
border-bottom:1px solid #000;
}
#box2 {
background-color:#cccccc;
border-left:1px solid #000000;
}
#box3 {
background-color:#999999;
border-right:1px solid #000000;
}
#box4 {
background-color:#666666;
border-top:1px solid #000000;
}
JQUERY
$(document).ready(function(){
$("#container").click(function(){
$("#box1, #box3").switchClass("horizontal", "newVertical", 1000);
$("#box2, #box4").switchClass("vertical", "newHorizontal", 1000);
});
});
http://jsfiddle.net/pcdqz/1/
JqueryUI has a dependency on Jquery.
Add <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> or a similar cdn link prior to loading JqueryUI.
If I put this.style.background="#000"; inline in the div, like onclick="this.style.background="#000";, it works. However, if I put that in a function and call the function from the same onclick event, it doesn't work. However, if I make the function do something else (like bring up an alert box), it does work. What's going on?
Here's the code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<style>
.tile {
width: 48px;
height: 48px;
margin: 0px;
padding: 0px;
float: left;
background-color:red;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="tile" onclick="myFunction()"></div>
<script>
function myFunction() {
this.style.background="#000000";
}
</script>
</body>
</html>
I noticed you're including jQuery. You should strongly consider separating your markup and JavaScript. If you do go that route, here's what that would look like:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<style>
.tile {
width: 48px;
height: 48px;
margin: 0px;
padding: 0px;
float: left;
background-color:red;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="tile"></div>
<script>
$(function () {
$(".tile").click(function () {
$(this).css('background-color', '#000000');
});
});
</script>
</body>
</html>
Example: http://jsfiddle.net/6zAN7/9/
If you would like to do it this way you need to pass the reference of DIV element when you invoke your function. During execution of your onclick handler "this" will reference to the current element. Pass it as an argument!
Here is the corrected code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<style>
.tile {
width: 48px;
height: 48px;
margin: 0px;
padding: 0px;
float: left;
background-color:red;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="tile" onclick="myFunction(this)"></div>
<script>
function myFunction(divObj) {
divObj.style.background="#000000";
}
</script>
</body>
</html>
<div class="tile" onclick="myFunction(this)"></div>
<script>
function myFunction(x) {
x.style.background="#000000";
}
</script>