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
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>
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>
i'm trying to create a "chat" on my website, i wrote question and answer in html (radio) e hide them when not selected with js, also after the first selection the script hide the other radio and disable the selected one. Probably i should simplify the all code but i'm kind a noob with Js. There's a more simple way to achieve the same result? Should I convert it in php? Anyone can help?
Thanks a lot
<!DOCTYPE html>
<html>
<head>
<title>progettodont</title>
<style type="text/css">
.classQuestion {
margin: 10px;
padding: 10px;
border-radius: 7px;
color: #fff;
background-color: #119b97;
display: inline-block;
max-width: 700px;
}
.classAnswerActive {float: right;}
.divClassAnswer {text-align: center}
.classAnswer { margin: 10px;
padding: 10px;
border-radius: 7px;
color: #414042;
background-color: #ccc;
max-width: 700px;
display: inline-block;
}
.classRadio {display: none;}
</style>
</head>
<body>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$('.classAnswer').click(function(){
$('.classAnswer').not(this).hide();
});
});
</script>
<script>
$(document).ready(function () {
$('.classAnswer').on('click', function () {
$('.classAnswer').addClass('classAnswerActive');
});
});
</script>
<div class="classQuestion">QUESTION 1_1</div>
<div class="divClassAnswer">
<label for="idAnswer_1_1" class="classAnswer">ANSWER 1_1</label>
<input type="radio" name="nameAnswer_1_1" class="classRadio"
id="idAnswer_1_1" value="Answer_1_1">
<label for="idAnswer_1_2" class="classAnswer">ANSWER 1_2</label>
<input type="radio" name="nameAnswer_1_2" class="classRadio"
id="idAnswer_1_2" value="Answer_1_2">
<label for="idAnswer_1_3" class="classAnswer">ANSWER 1_3</label>
<input type="radio" name="nameAnswer_1_3" class="classRadio"
id="idAnswer_1_3" value="Answer_1_3">
</div>
<script type="text/javascript">
$(function () {
$("#idAnswer_1_1").click(function () {
if ($(this).is(":checked")) {
$("#idQuestion_2_1").show();
} else {
$("#idQuestion_2_1").hide();
}
});
});
</script>
<div class="classQuestion" id="idQuestion_2_1" style="display: none">
QUESTION 2_1
</div>
<script type="text/javascript">
$(function () {
$("#idAnswer_1_2").click(function () {
if ($(this).is(":checked")) {
$("#idQuestion_2_2").show();
} else {
$("#idQuestion_2_2").hide();
}
});
});
</script>
<div class="classQuestion" id="idQuestion_2_2" style="display: none">
QUESTION 2_2
</div>
<script type="text/javascript">
$(function () {
$("#idAnswer_1_3").click(function () {
if ($(this).is(":checked")) {
$("#idQuestion_2_3").show();
} else {
$("#idQuestion_2_3").hide();
}
});
});
</script>
<div class="classQuestion" id="idQuestion_2_3" style="display: none">
QUESTION 2_3
</div>
</body>
I don't know what this has to do with a 'chat' system, however you can make several improvements to your code:
You're including multiple versions of jQuery. Only include a single one.
Place all script within a single <script> in the page, and place any jQuery code in that within a single document.ready event handler.
Use a common class to group the radio elements. Then you can bind a single event handler to that class. You can use a data attribute to store custom meta data about the element which you can then use in the event handler.
Try this:
$(document).ready(function() {
$('.classAnswer').click(function() {
$('.classAnswer').not(this).hide();
$(this).addClass('active');
});
$(".classRadio").on('change', function() {
$('#' + $(this).data('target')).toggleClass('active', this.checked);
});
});
.classQuestion {
margin: 10px;
padding: 10px;
border-radius: 7px;
color: #fff;
background-color: #119b97;
display: inline-block;
max-width: 700px;
display: none;
}
.classQuestion.active { display: inline-block; }
.divClassAnswer {
text-align: center
}
.classAnswer {
margin: 10px;
padding: 10px;
border-radius: 7px;
color: #414042;
background-color: #ccc;
max-width: 700px;
display: inline-block;
}
.classAnswer.active {
float: right;
}
.classRadio {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="classQuestion active">QUESTION 1_1</div>
<div class="divClassAnswer">
<label for="idAnswer_1_1" class="classAnswer">ANSWER 1_1</label>
<input type="radio" name="nameAnswer_1_1" class="classRadio" id="idAnswer_1_1" value="Answer_1_1" data-target="idQuestion_2_1">
<label for="idAnswer_1_2" class="classAnswer">ANSWER 1_2</label>
<input type="radio" name="nameAnswer_1_2" class="classRadio" id="idAnswer_1_2" value="Answer_1_2" data-target="idQuestion_2_2">
<label for="idAnswer_1_3" class="classAnswer">ANSWER 1_3</label>
<input type="radio" name="nameAnswer_1_3" class="classRadio" id="idAnswer_1_3" value="Answer_1_3" data-target="idQuestion_2_3">
</div>
<div class="classQuestion" id="idQuestion_2_1">QUESTION 2_1</div>
<div class="classQuestion" id="idQuestion_2_2">QUESTION 2_2</div>
<div class="classQuestion" id="idQuestion_2_3">QUESTION 2_3</div>
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>
I am not able to get the checkbox in this page to be checked.
<html>
<body>
<form name="f">
<input type="checkbox" name="vehicle" value="Bike" /> 1<br /></li>
</form>
</body>
</html>
My popup.js is below:
function click(e) {
chrome.tabs.executeScript(null,
{code:"document.body.f.vehicle.checked='true'"});
window.close();
}
document.addEventListener('DOMContentLoaded', function () {
var divs = document.querySelectorAll('div');
for (var i = 0; i < divs.length; i++) {
divs[i].addEventListener('click', click);
}
});
In the console log I keep getting the error: Uncaught TypeError: Cannot read property 'vehicle' of undefined.
My popup.html is below:
<!doctype html>
<html>
<head>
<title>Set Page Color Popup</title>
<style>
body {
overflow: hidden;
margin: 0px;
padding: 0px;
background: white;
}
div:first-child {
margin-top: 0px;
}
div {
cursor: pointer;
text-align: center;
padding: 1px 3px;
font-family: sans-serif;
font-size: 0.8em;
width: 100px;
margin-top: 1px;
background: #cccccc;
}
div:hover {
background: #aaaaaa;
}
</style>
<script src="popup.js"></script>
</head>
<body>
<div id="1">1</div>
</body>
</html>
Any help would be appreciated.
It should be like this,
document.f.vehicle.checked='true';
http://jsfiddle.net/PnXsE/