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>
Related
Start tag head seen but an element of the same type was already open.
also I got some other errors:
" Saw <?. Probable cause: Attempt to use an XML processing instruction in HTML. (XML processing instructions are not supported in HTML.) "
and
" No p element in scope but a p end tag seen. "
I have no clue how to fix them.
<!DOCTYPE html>
<html lang="pl">
<style>
html, body { margin: 0; padding: 0; color: black; background-color: grey;}
#strona { position: absolute; color: white}
#rects { position: relative; width: 300px; height: 125px; border: 1px solid #FF0000; color: yellow; margin: 5px; padding: 2px;}
</style>
<head>
<meta charset="UTF-8"/>
<title> site</title>
</head>
<body>
<div> <script>
function clickbutton1(){
document.getElementById("opis").innerHTML = Date();
}
</script>
</div>
<div id="strona">
<h1>test</h1>
<?php
echo "<p>data replacement</p>";
echo "<div id='rects'>
<!-- starting of the function -->
<p id='opis'> internal description </p>
<script>
document.getElementById('rects').onclick = clickbutton1;
</script>
</div>";
?>
</div>
</body>
</html>```
There were some added characters under div#strona that were interfering with how the code was being run.
In order to make the Javascript functional, add the clickbutton1() onclick function directly to the HTML element.
Below is the reformatted code with HTML/CSS/Javascript in their own respective files:
function clickbutton1() {
return document.getElementById("opis").innerHTML = Date();
}
html,
body {
margin: 0;
padding: 0;
color: black;
background-color: grey;
}
#strona {
position: absolute;
color: white
}
#rects {
position: relative;
width: 300px;
height: 125px;
border: 1px solid #FF0000;
color: yellow;
margin: 5px;
padding: 2px;
}
<head>
<meta charset="UTF-8" />
<title> site</title>
</head>
<body>
<div id="strona">
<h1>test</h1>
<div onclick="clickbutton1()" id='rects'>
<p id='opis'></p>
</div>
</div>
</body>
#weemizo Yes! I added the CSS styles to a style tag and the JS into a script element. They are now both placed in the head tag.
<html>
<head>
<meta charset="UTF-8" />
<title>Site</title>
<style>
html,
body {
margin: 0;
padding: 0;
color: black;
background-color: grey;
}
#strona {
position: absolute;
color: white
}
#rects {
position: relative;
width: 300px;
height: 125px;
border: 1px solid #FF0000;
color: yellow;
margin: 5px;
padding: 2px;
}
</style>
<script>
function clickbutton1() {
return document.getElementById("opis").innerHTML = Date();
}
</script>
</head>
<body>
<div id="strona">
<h1>test</h1>
<div onclick="clickbutton1()" id='rects'>
<p id='opis'></p>
</div>
</div>
</body>
</html>
Sorry to ask but I have searched but coming up with nothing.
I have some divs ( I know everyone has a 'div' ) and I want to add feeds\content
See my code below, in these 'widgets' can I add things like twitter and my email and a news feed?
also not to be too picky, can I just get text only ?
How do I go about it ? Is their something
here is the html, jquery and css code...
<!doctype html>
<html lang="en">
<head>
<title>snap to grid</title>
<meta charset="utf-8">
<meta name="description" content="nothing yet">
<meta name="author" content="Pavle Stojanovic">
<link rel="stylesheet" href="snap.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
$( ".widgets" ).draggable({ grid: [ 10, 10 ] });
$( ".widgets" ).draggable({
containment: "#draggable-container",
drag: function(event){
if($('.widgets').position().left + $('.widgets').width() == $('.body-container').width()){
event.preventDefault(); //cancel the drag.
console.log('d');
}
}
});
});
</script>
</head>
<body>
<div class="body-container">
<div id="draggable-container">
<div id="widget-1" class="widgets"><p>Twitter</p></div>
<div id="widget-2" class="widgets"><p>Weather</p></div>
<div id="widget-3" class="widgets"><p>News</p></div>
<div id="widget-4" class="widgets"><p>Email</p></div>
</div>
</div>
</body>
</html>
html, body{
background-color: #2196F3;
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#widget-1{
background-color: blue;
}
#widget-2{
background-color: purple;
}
#widget-3{
background-color: orange;
}
#widget-4{
background-color: green;
}
.widgets{
border-radius: 25px;
padding: 20px;
width: 150px;
height: 200px;
}
#draggable-container{
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 1px solid black;
width:90%;
height:90%;
}
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>
I'm trying to create a program where the user will input some text in a field and when pressing "Start" the text will go to a paragraph but it will be shown backwards.
Trying to do this with Html,jquery and Css.
How can I do this?
Here's the Html:
<!DOCTYPE html>
<html id="head">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="BackTalk.js"></script>
<link rel="stylesheet" type="text/css" href="BackTalk.css">
<title>BackTalk</title>
</head>
<body id="body">
<div id="Main">
<form>
<input id="input" type="number" value="Start">
<button id="input2" onclick="">Start</button>
</form>
</div>
<form id="frm">
<p id="para"></p>
</form>
</body>
</html>
And the $/javascript (Main part I need help with as you can see):
$(document).ready(function () {
$('#input2').click(function () {
});
});
Css (Don't know if needed):
#head {
}
#body {
background-image: url('stardust.png');
}
#Main {
width: 230px;
padding: 10px;
border: 1px double #ffffff;
border-radius: 10px;
margin: auto;
}
#frm {
width: 230px;
height: 500px;
padding: 10px;
border: 1px double #ffffff;
border-radius: 10px;
margin: auto;
}
#input {
border-radius: 10px;
}
#input2 {
border-radius: 10px;
}
Try this http://jsfiddle.net/Tushar490/th778nfs/
$('#input2').click(function () {
var value=$('#input').val();
console.log($('#para').text(value.split("").reverse().join("")));
});
Not sure if this is exactly what you're looking for:
$(document).ready(function () {
$('#startbutton').click(function () {
$('#para').text($('#input').val().split('').reverse().join(''));
});
});
JSFiddle
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>