Basically, I have to create a button that when clicked, I need to retrieve all the paragraphs within the div and make their background highlighted.
Then I have to write the corresponding JS code (in an unobtrusive manner) to link the button to a function that highlights the paragraphs when clicked.
The button should act as a “toggle”, that is, if the paragraphs are already highlighted, then clicking the button unhighlight them. If the paragraphs aren’t highlighted, then clicking the button highlights them. The button’s text should change to reflect this so it should either say click to highlight or click to unhighlight. So far, I'm trying to create a function that iterates over these paragraphs but the highlight isn't working
** I know that the mark tag in html would highlight a text is there any way i can add that to my js code? **
HTML:
<!DOCTYPE html>
<html>
<head>
<script src="task2.js"></script>
<style>
#poem {
padding: 10px;
margin-bottom: 10px;
color: blue;
font-size: 1.25em;
font-family: sans-serif;
background-color: silver;
border: 1px dashed black;
width: 30%;
}
</style>
</head>
<!- Modify code to add a button ->
<body>
<div id="poem">
<h2> How Many, How Much </h2>
<h4> by Shel Silverstein </h4>
<p> How many slams in an old screen door? </p>
<p> Depends how loud you shut it.</p>
<p> How many slices in a bread?</p>
<p> Depends how thin you cut it.</p>
<p> How much good inside a day? </p>
<p> Depends how good you live 'em. </p>
<p> How much love inside a friend? </p>
<p> Depends how much you give 'em. </p>
</div>
<button id="button"> Click to highlight </button>
</body>
</html>
js code:
function pageLoad() {
var button = document.getElementById("button");
button.onclick = okClick;
}
function okClick() {
var allParas = document.getElementsByTagName("p");
for (var i=0; i < allParas.length; i++) {
if(allParas[i].classList.contains('highlightClass')) {
allParas[i].classList.remove('highlightClass');
} else {
allParas[i].classList.add('highlightClass');
}
}
}
window.onload = pageLoad;
create a new class highlightClass.
if ( allParas[i].classList.contains('highlightClass') ) {
allParas[i].classList.remove('highlightClass');
}else{
allParas[i].classList.add('highlightClass');
}
Related
I need to make a make elements within a div appear and disappear when the div is clicked. When then webpage is loaded, it should just say "Click here". After clicking, new text saying "Click here again" should appear under the original text. After clicking again, new text appears under that saying "Click once more". After clicking again, all that text is deleted and new text saying "Thank you" appears. After clicking again, that text is deleted and new text saying "Goodbye" appears. After clicking once more, everything is deleted including the box that the text appears in. I am new to this and don't really know what I'm doing, and I can't even get an alert message to pop up when the div is clicked, which seems like it should be pretty simple. Here is my html code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="project4.css">
<script src="prototype.js" type="text/javascript"></script>
<script src="project4.js" type="text/javascript"></script>
</head>
<body>
<div id="main" class="box">
<p id="clickHere">Click here</p>
<p id="clickHereAgain">Click here again</p>
<p id="clickOnceMore">Click once more</p>
<p id="thankYou">Thank you</p>
<p id="goodbye">Goodbye</p>
</div>
</body>
</html>
My javascript code to just try to get an alert to pop up:
$(document).ready(function(){
$("div").click(function(){
alert("The paragraph was clicked.");
});
});
And my css code:
.box {
background-color: green;
color: white;
width: 300px;
height: 200px;
padding: 10px;
text-align: center;
font-size: 30px;
}
Here is a raw solution for your problem in jQuery, you may just transfer the logic to prototype.js:
$(document).ready(function() {
// turn off your paragraphs and buttons
$("#click2").hide();
$("#click3").hide();
$("#click4").hide();
$("#button2").hide();
$("#button3").hide();
$("#button4").hide();
// click the first button and hide and show the next
$("#button1").click(function() {
$("#click1").hide();
$("#button1").hide();
$("#button2").show();
$("#click2").show();
});
// click the second button and hide and show
$("#button2").click(function() {
$("#click2").hide();
$("#button2").hide();
$("#button3").show();
$("#click3").show();
});
// then the third
$("#button3").click(function() {
$("#click3").hide();
$("#button3").hide();
$("#click4").show();
});
});
And your HTML code:
<p id="click1">This is paragraph 1</p>
<button id="button1">Click me</button>
<p id="click2">This is paragraph 2</p>
<button id="button2">Click me again</button>
<p id="click3">This is paragraph 3</p>
<button id="button3">Click me one more time</button>
<p id="click4">You are done clicking</p>
Not an elegant solution, but those are the basics of it, jQuery has a toggle() function, just in case you need to give the user the ability to show the paragraph again. replace .show() and .hide() with .toggle()
For starters, set a click observer for the div and all of its children:
$("div").observe('click', myHandler);
Then perform the show/hide operation in myHandler.
A working example:
// array of paragraph ids to show/hide
const ids = ["clickHere", "clickHereAgain", "clickOnceMore",
"thankYou", "goodbye"];
const idCount = ids.length;
let index = 0;
// add click listener to div
$("main").observe('click', myHandler);
// handle the click
function myHandler () {
if (index >= idCount - 1) return;
// hide the currently visible paragraph
$(ids[index]).addClassName('hide');
// show the next paragraph
index++;
$(ids[index]).removeClassName('hide');
}
.hide {
display: none;
}
.box {
background-color: green;
color: white;
width: 300px;
height: 100px;
padding: 10px;
text-align: center;
font-size: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prototype/1.7.3/prototype.min.js" type="text/javascript"></script>
<div id="main" class="box">
<p id="clickHere">Click here</p>
<p id="clickHereAgain" class="hide">Click here again</p>
<p id="clickOnceMore" class="hide">Click once more</p>
<p id="thankYou" class="hide">Thank you</p>
<p id="goodbye" class="hide">Goodbye</p>
</div>
I have the following structure .. I would like to remove div.son but keepdiv.grandson, is that possible ?! or changing your <tag> would also be a solution .. ex: changing from <fieldset> to a <div>, remembering that I do not have access to HTML, every change must be done using ** javascript **!
<div class="father">
<fieldset class="son">
<div class="grandson">Content here</div>
<div class="grandson">Content here</div>
<div class="grandson">Content here</div>
<div class="grandson">Content here</div>
</fieldset>
</div>
I tried to use the removeChild () function of ** javascript **, but it removes the entire element.
It's possible with vanilla JavaScript by deep cloning the node of grandson before removing anything else. and then appending it back to the parent. Of course if you want to place it somewhere else, you need to append needed logic of DOM traversing. (CSS section is only for visual validation of the result)
const grandson = document.querySelector('.grandson');
const father = grandson.closest('.father');
const clonedGrandson = grandson.cloneNode(true);
father.querySelector('.son').remove();
father.appendChild(clonedGrandson);
.father {
background-color: red;
padding: 20px;
}
.son {
background-color: blue;
padding: 20px;
}
.grandson {
background-color: green;
padding: 20px;
}
<div class="father">
<fieldset class="son">
<div class="grandson">
<p>Save me</p>
</div>
</fieldset>
</div>
You may take a look at this answer, try to use the search bar next time.
https://stackoverflow.com/a/170056/10944905
In case you just want to jump all over the answer.
var cnt = $(".remove-just-this").contents();
$(".remove-just-this").replaceWith(cnt);
I am trying to make a simple text editing box so that I can eventually post text to another section of a website. I'm attempting to make buttons to make text bold, italicized, add a code box etc, (hence insertAdjacentHTML not insertAdjacentText) but I decided to just start making sure I could get plain text to print to a textarea.
I have achieved this easily but now my question becomes how do I make it so that the button still affects the text area after a user has added text to it? the code below will happily type out "hello"'s up until you click on the textarea, and from that point on it refuses to and I can't figure out why.
window.hello = function(textarea) {
var obj = document.getElementById("text");
obj.insertAdjacentHTML('beforeend', 'hello');
}
<body>
<button onclick="hello()">hello</button>
<form>
<p></p>
<textarea id="text"></textarea>
</form>
</body>
As you can read from MDN a textarea can contain only Character data.
This is the reason because you cannot use insertAdjacentHTML and instead you can use the value.
If you need to add text in bold or ... you can use a contenteditable div element.
The snippet:
window.helloDiv = function() {
var obj = document.getElementById("textDiv");
obj.insertAdjacentHTML('beforeend', 'hello');
};
window.helloTxtArea = function() {
var obj = document.getElementById("textTxtArea");
obj.value += 'hello';
}
div {
width: 300px;
height: 100px;
border: 1px;
border-style: solid;
}
textarea {
width: 300px;
height: 100px;
margin-top: 10px;
}
<button onclick="helloDiv()">helloDiv</button>
<button onclick="helloTxtArea()">helloTextArea</button>
<form>
<p></p>
<div id="textDiv" contenteditable="true"></div>
<textarea id="textTxtArea" contenteditable="true"></textarea>
</form>
I am trying to create an online radio station. As part of the process, I need my player to call track/story data when the play button for a story is clicked on a different part of the page.
I'm using JSON to call the data to the each div. The data I have for stories is as follows:
<div class="play_button text-hide"
data-id="{id}"
data-title="{title}"
data-storyurl="{fullUrl}"
data-program="{category}"
data-programurl="{category.fullUrl}"
data-type="audio"
data-src="{soundcloudLink}"
data-item-type="story"
data-pub-date="{addedOn}">
</div>
How would I call that data to my player, which is a separate div on click?
In other words, my page will have multiple stories with audio files, and whenever one of them is clicked, I would like the player to display
<div>
{title}
{category}
</div>
For each track/story that is clicked.
WBEZ was used as an example.
You can hide your data by default and onclick you can set it to visible.
Try this,
<html>
<head>
<style>
#panel, .flip {
font-size: 16px;
padding: 10px;
text-align: center;
background-color: #4CAF50;
color: white;
border: solid 1px #a6d8a8;
margin: auto;
}
#panel {
display: none;
}
</style>
</head>
<body>
<p class="flip" onclick="myFunction()">Tere Sang yara</p>
<div id="panel">
<p>Tere Sang yara</p>
<p>Movie : Rushtam</p>
<p>Great Movie</p>
<p>Listening now</p>
</div>
<script>
function myFunction() {
document.getElementById("panel").style.display = "block";
}
</script>
</body>
</html>
Hope it will help. :)
If your problem is on getting the data from the div and to the player this should do it:
$(".play_button").click(function(event){//click on the div with the information
var el = $(this);//the div
var dataToPass = {//your data in an object
dataId: el.attr("data-id"),
dataTitle: el.attr("data-title"),
dataStoryUrl: el.attr("data-storyurl"),
dataProgram: el.attr("data-program"),
dataProgramUrl: el.attr("data-programurl"),
dataType: el.attr("data-type"),
dataSrc: el.attr("data-src"),
dataItemType: el.attr("data-pub-date")};
//Send it to your player (not sure what your idea is)
//You can access it like
var test = dataToPass.dataId;//same goes for the others
});
Answering your comment:
If you have a class or an id on the target div, say target:
<div id = "target"> {data-title} {data-program} </div>
,you can do:
$("#target").html(
'"'+dataToPass.dataTitle+'"\
"'+dataToPass.dataProgram+'"');
the '\' at the end of line 2 is just for the line break in the string
All together now (I removed the unused variables (attributes) for this part):
$(".play_button").click(function(event){//click on the div with the information
var el = $(this);//the clicked div
var dataToPass = {//your data in an object
dataTitle: el.attr("data-title"),
dataStoryUrl: el.attr("data-storyurl"),
dataProgram: el.attr("data-program"),
dataProgramUrl: el.attr("data-programurl")};
//Send it to the target div
$("#target").html(
'"'+dataToPass.dataTitle+'"\
"'+dataToPass.dataProgram+'"');
});
I am fairly new to Javascript and am trying to write an extension for Chrome. I am struggling with one aspect. Please note that the HTML comes from another webpage over which I have no control so I cannot modify it unless I do it programmatically. Also, I have shown three text items in the example below, but this could be as few as one or many more separated by "br". The HTML is as below:
<div class = "cls" id = "1234">
<quote>...</quote>
"Text to hide/show 1"
<br style="font-size: medium; height: auto; line-height: normal;">
"Text to hide/show 2"
<br style="font-size: medium; height: auto; line-height: normal;">
"Text to hide/show 3"
</div>
The Javascript code is as follows:
function processQuotes() {
$('.cls quote').each(function() {
var $quote = $(this);
var userId = $quote.parent().first().text(); /* For example */
/* See whether user is blocked */
if(blockUser[userId]) {
/* Hide text and br elements */
} else {
/* Show text and br elements */
}
});
}
I want to be able to hide the section from "Text to hide/show 1" to "Text to hide/show 3". I envisaged using the JQuery $var.Hide() and $var.Show() methods but I am struggling with how to get the parts I want to hide into $var.
Any help would be gratefully received.
Thanks,
Richard
I worte a sample, maybe could help:
<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.11.1.min.js" type="text/javascript" ></script>
</head>
<body>
<div class = "cls" id = "1234">
<quote>...</quote>
<p style="font-size: medium; height: auto; line-height: normal;">"Text to hide/show 1"</p>
<br />
<p style="font-size: medium; height: auto; line-height: normal;">"Text to hide/show 2"</p>
<br />
<p>"Text to hide/show 3"</p>
</div>
<script>
for(var i=0; i<3; i++){
(function(i){
$("#1234 p").eq(i).click(function(){
$("#1234 p").show();
$("#1234 p").eq(i).hide();
});
})(i);
}
</script>
</body>
</html>