This is my first post and I don't know what I am doing yet, so please bear with me.
I am trying to use vanilla JS to highlight a clicked anchor and remove the previously highlighted anchor.
I am not sure why it is not working but I am new at this.
My CodePen
below is just the JS. .nav-link is the link class. active is the class that should manipulate it after the click.
window.onload = afterClick;
function afterClick(){
//set an on off array to toggle.
let linkClass = document.querySelectorAll(".nav-link");
linkClass.forEach(link => link.addEventListener("click", function(){
if (link.classList.contains("active")) {
link.classList.remove("active");
link.classList.add("active");
}}));
}
Thank you!
Instead of onload you can listen to hashchange event instead to achieve this like:
window.addEventListener("hashchange", () => {
let hash = window.location.hash;
if (hash) {
let linkClass = document.querySelectorAll(".nav-link");
linkClass.forEach(x => x.classList.remove("active"))
document.querySelector('a[href="' + hash + '"]').classList.add("active");
}
});
So, whenever the url hash will change, it will remove the active class from all the links using:
linkClass.forEach(x => x.classList.remove("active"))
and then it will search for the link having that hash and add the active class to that link only using:
document.querySelector('a[href="' + hash + '"]').classList.add("active");
Working Demo:
window.addEventListener("hashchange", () => {
let hash = window.location.hash;
if (hash) {
let linkClass = document.querySelectorAll(".nav-link");
linkClass.forEach(x => x.classList.remove("active"))
document.querySelector('a[href="' + hash + '"]').classList.add("active");
}
});
#main-doc{font-family:Montserrat,sans-serif}#navbar{float:left;position:fixed;font-family:Montserrat,sans-serif;font-weight:700;min-width:230px;max-width:231px;height:100vh;background:url(https://image.freepik.com/free-vector/elegant-white-texture-background_23-2148431731.jpg);margin-top:-10px;margin-left:-10px;margin-right:40px;margin-bottom:25px;border:1px solid #000}#navbar header{padding:14px;font-size:1.8em;text-align:center;border:1px solid #000}#navbar a{display:block;color:#000;text-decoration:none;padding:15px;font-size:1.1em;text-align:center;border:1px solid #000;border-top:0}.main-section header{margin-left:30px;font-family:Notable,sans-serif;font-size:1.4rem}.main-section ul li{list-style-type:none;font-size:1.3em;padding-bottom:6px}.main-section{margin-left:230px;margin-right:50px;padding-top:20px}#main-doc{padding-bottom:60px}code{font-size:1rem;font-family:Montserrat,sans-serif}.active{color:orange!important;background-color:#00f!important}#media only screen and (max-width:425px){#navbar{max-width:425px;min-width:200px;position:relative;width:100vw;height:auto}.nav-link{margin-top:0;width:100vw}.main-section{margin-left:5px;margin-right:10px;padding-top:20px}.main-section ul{padding-left:5px}.navbar a{padding:0}}
<style>
#import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Notable&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#700&display=swap');
</style>
<!-- font-family: 'Montserrat', sans-serif;
font-family: 'Notable', sans-serif; -->
<nav id="navbar">
<header style="color: #FFDF01 ;background: url(https://img.freepik.com/free-photo/blue-with-vignette-marble-texture-background-with-copy-space_23-2148327728.jpg?size=626&ext=jpg)">Common Sharks</header>
<a class="nav-link" href="#About_Sharks" id="aboutSharks">About Sharks</a>
<a class="nav-link" href="#The_Great_White">The Great White</a>
<a class="nav-link" href="#Oceanic_White_Tip">Oceanic White Tip</a>
<a class="nav-link" href="#Bull_Shark">Bull Shark</a>
<a class="nav-link" href="#Tiger_Shark">Tiger Shark</a>
</nav>
<main id="main-doc">
<section class='main-section' id="About_Sharks">
<header>About Sharks</header>
</br>
<ul><span style="font-size: 2.1em; margin-left: 5px;">B</span>efore we can talk about the most deadly sharks in the world, there are a few interesting facts that will help you understand sharks as a species better.</br>
</br>
<li>Sharks do not have bones</li>
<p>Sharks use their gills to filter oxygen from the water. They are a special type of fish known <i>Elasmobranch</i>, which translates into: </br>fish made of cartilaginous tissues—the clear gristly stuff that your ears and nose tip are made of. This
category also includes rays, sawfish, and skates. Their cartilaginous skeletons are much lighter than true bone and their large livers are full of low-density oils, both helping them to be buoyant. </p>
<p>Even though sharks don't have bones, they still can fossilize. As most sharks age, they deposit calcium salts in their skeletal cartilage to strengthen it. The dried jaws of a shark appear and feel heavy and solid; much like bone. These same minerals
allow most shark skeletal systems to fossilize quite nicely. The teeth have enamel so they show up in the fossil record too.</p>
</br>
<li>Most sharks have good eyesight</li>
<p>Most sharks can see well in dark lighted areas, have fantastic night vision, and can see colors. The back of sharks’ eyeballs have a reflective layer of tissue called a tapetum. This helps sharks see extremely well with little light.</p>
<br><br>
<li>Sharks have special electroreceptor organs</li>
<p>Sharks have small black spots near the nose, eyes, and mouth. These spots are the <i>ampullae of Lorenzini</i> – special electroreceptor organs that allow the shark to sense electromagnetic fields and temperature shifts in the ocean.</p>
<br>
<li>Shark skin feels similar to sandpaper</li>
<p>Shark skin feels exactly like sandpaper because it is made up of tiny teeth-like structures called placoid scales, also known as dermal denticles. These scales point towards the tail and help reduce friction from surrounding water when the shark
swims.
</p>
<br>
<li>Sharks can go into a trance</li>
<p>When you flip a shark upside down they go into a trance like state called tonic immobility. This is the reason why you often see sawfish flipped over when our scientists are working on them in the water.</p>
</br>
<li>Sharks have been around a very long time</li>
<p>Based on fossil scales found in Australia and the United States, scientists hypothesize sharks first appeared in the ocean around 455 million years ago.</p>
<br>
<li>Scientists age sharks by counting the rings on their vertebrae</li>
<p><code>Vertebrae contain concentric pairs of opaque and translucent bands. Band pairs are counted like rings on a tree and then scientists assign an age to the shark based on the count. Thus, if the vertebrae has 10 band pairs, it is assumed to be 10 years old. Recent studies, however, have shown that this assumption is not always correct. Researchers must therefore study each species and size class to determine how often the band pairs are deposited because the deposition rate may change over time. Determining the actual rate that the bands are deposited is called <i>validation</i>.</code></p>
<br>
<li>Blue sharks are really blue</li>
<p><code>The blue shark displays a brilliant blue color on the upper portion of its body and is normally snowy white beneath. The mako and porbeagle sharks also exhibit a blue coloration, but it is not nearly as brilliant as that of a blue shark. In life, most sharks are brown, olive, or grayish.</code></p>
<br>
<li>Each whale shark’s spot pattern is unique as a fingerprint</li>
<p>Whale sharks are the biggest fish in the ocean. They can grow to 12.2 meters and weigh as much as 40 tons by some estimates! Basking sharks are the world's second largest fish, growing as long as 32 feet and weighing more than five tons.</p>
<br>
<li>Some species of sharks have a spiracle that allows them to pull water into their respiratory system while at rest</li>
<p>Most sharks have to keep swimming to pump water over their gills A shark's spiracle is located just behind the eyes which supplies oxygen directly to the shark's eyes and brain. Bottom dwelling sharks, like angel sharks and nurse sharks, use this
extra respiratory organ to breathe while at rest on the seafloor. It is also used for respiration when the shark's mouth is used for eating.</p>
<br>
<li>Not all sharks have the same teeth</li>
<p>
Mako sharks have very pointed teeth, while white sharks have triangular, serrated teeth. Each leave a unique, tell-tale mark on their prey. A sandbar shark will have around 35,000 teeth over the course of its lifetime! </p>
<br>
<li>Different shark species reproduce in different ways</li>
<p>
Sharks exhibit a great diversity in their reproductive modes. There are oviparous (egg-laying) species and <i>viviparous</i> (live-bearing) species. Oviparous species lay eggs that develop and hatch outside the mother's body with no parental care
after the eggs are laid.</p>
</section>
<section class='main-section' id="The_Great_White">
<header>The Great White</header>
<ul>
The legendary great white shark is far more fearsome in our imaginations than in reality. As scientific research on these elusive predators increases, their image as mindless killing machines is beginning to fade.
</br>
</br>
<li>Shark Attacks</li>
Of the <i><b>100-plus</b></i> annual shark attacks worldwide, fully one-third to one-half are attributable to great whites. However, most of these are not fatal, and new research finds that great whites, who are naturally curious, are "sample biting"
then releasing their victims rather than preying on humans. It's not a terribly comforting distinction, but it does indicate that humans are not actually on the great white's menu.
</br>
</br>
<li>Characteristics</li>
Great whites are the largest predatory fish on Earth. They grow to an average of 15 feet in length, though specimens exceeding 20 feet and weighing up to 5,000 pounds have been recorded. They have slate-gray upper bodies to blend in with the rocky coastal
sea floor, but get their name from their universally white underbellies. They are streamlined, torpedo-shaped swimmers with powerful tails that can propel them through the water at speeds of up to 15 miles per hour. They can even leave the water
completely, breaching like whales when attacking prey from underneath.
</br>
</br>
<li>Hunting Adaptations</li>
Highly adapted predators, their mouths are lined with up to 300 serrated, triangular teeth arranged in several rows, and they have an exceptional sense of smell to detect prey. They even have organs that can sense the tiny electromagnetic fields generated
by animals. Their main prey items include sea lions, seals, small toothed whales, and even sea turtles, and carrion.
</br>
</br>
<li>Population</li>
</code>Found in cool, coastal waters throughout the world, there is no reliable data on the great white's population. However, scientists agree that their number are decreasing precipitously due to overfishing and accidental catching in gill nets, among
other factors, and they are considered a vulnerable species.</code>
</ul>
</section>
<section class='main-section' id="Oceanic_White_Tip">
<header>Oceanic White Tip</header>
<ul>
</br>
<li>Characteristics</li>
This is an active, almost fearless shark also associated with human attacks. MarineBio considers this shark the most potentially dangerous after great whites, tiger, and bull sharks, especially for open-ocean divers. This species is likely responsible
for open-ocean attacks following air or sea disasters.
</br>
</br>
<li>Behavior</li>
Oceanic whitetips can be very aggressive and unpredictable in the presence of potential prey. Sold commercially fresh, frozen, smoked, and dried-salted for human consumption; hides for leather, fins for shark fin soup, liver oil for vitamins, and processed
into fishmeal.
</br>
This species is a widespread and common large pelagic shark of warm oceanic waters. It presumably has a low reproductive capacity, but is extremely abundant and wide-ranging and is subject to fishery pressure as a common bycatch species with tuna and
other pelagic species. This bycatch is reportedly either inadequately reported or unrecorded. The fins are highly prized in trade although the carcass is often discarded. Fishery pressure is likely to persist, if not increase in future, and the
impact of this fishing pressure is presently unknown.
</br>
</br>
<li>Population</li>
<code>The oceanic whitetip shark, <i>Carcharhinus longimanus</i>, is listed as Critically Endangered.</code>
</ul>
</section>
<section class='main-section' id="Bull_Shark">
<header>Bull Shark</header>
<ul>
Bull sharks are aggressive, common, and usually live near high-population areas like tropical shorelines. They are not bothered by brackish and freshwater, and even venture far inland via rivers and tributaries.
</br>
</br>
<li>Human Encounters</li>
Because of these characteristics, many experts consider bull sharks to be the most dangerous sharks in the world. Historically, they are joined by their more famous cousins, great whites and tiger sharks, as the three species most likely to attack humans.
</br>
</br>
<li>Characteristics</li>
Bull sharks get their name from their short, blunt snout, as well as their pugnacious disposition and a tendency to head-butt their prey before attacking. They are medium-size sharks, with thick, stout bodies and long pectoral fins. They are gray on top
and white below, and the fins have dark tips, particularly on young bull sharks.
</br>
</br>
<li>Hunting</li>
They are found cruising the shallow, warm waters of all the world’s oceans. Fast, agile predators, they will eat almost anything they see, including fish, dolphins, and even other sharks. Humans are not, per se, on their menus. However, they frequent
the turbid waters of estuaries and bays, and often attack people inadvertently or out of curiosity.
</br>
</br>
<li>Threats to Survival</li>
<code>Bull sharks are fished widely for their meat, hides, and oils, and their numbers are likely shrinking. One study has found that their average lengths have declined significantly over the past few decades.</code>
</ul>
</section>
<section class='main-section' id="Tiger_Shark">
<header>Tiger Shark</header>
<ul>
Tiger sharks are named for the dark, vertical stripes found mainly on juveniles. As these sharks mature, the lines begin to fade and almost disappear.
</br>
</br>
<li>Shark Attacks</li>
These large, blunt-nosed predators have a duly earned reputation as man-eaters. They are second only to great whites in attacking people. But because they have a near completely undiscerning palate, they are not likely to swim away after biting a human,
as great whites frequently do.
</br>
</br>
<li>Hunting</li>
They are consummate scavengers, with excellent senses of sight and smell and a nearly limitless menu of diet items. They have sharp, highly serrated teeth and powerful jaws that allow them to crack the shells of sea turtles and clams. The stomach contents
of captured tiger sharks have included stingrays, sea snakes, seals, birds, squids, and even license plates and old tires.
</br>
</br>
<li>Population</li>
Tiger sharks are common in tropical and sub-tropical waters throughout the world. Large specimens can grow to as much as 20 to 25 feet in length and weigh more than 1,900 pounds.
</br>
</br>
<li>Threats to Survival</li>
<code>They are heavily harvested for their fins, skin, and flesh, and their livers contain high levels of vitamin A, which is processed into vitamin oil. They have extremely low repopulation rates, and therefore may be highly susceptible to fishing pressure. They are listed as near threatened throughout their range.</code>
</ul>
</section>
</main>
First problem I found is that in your if loop :
if (link.classList.contains("active")) {
link.classList.remove("active");
link.classList.add("active");
}
.. only triggers on an element that already has the "active" class you want it to add, so it's not doing anything right now. If we take your existing if loop to iterate through the other and remove the active class from them, then we can safely add the active class to the link that was clicked:
window.onload = afterClick;
function afterClick() {
let linkClass = document.querySelectorAll(".nav-link");
// Add eventListener
linkClass.forEach((originalLink) =>
originalLink.addEventListener("click", function () {
let linkElems = document.querySelectorAll(".nav-link");
// Clear "active class from the same links"
linkElems.forEach((linkElem)=>{
if (linkElem.classList.contains("active")) {
linkElem.classList.remove("active");
}
});
//add the |"active" class to the originally clicked elem
originalLink.classList.add("active");
})
);
}
Hope it helps! :)
I have written a class with methods to extract and process text from html. The html file contains three articles. Each in a 'text' tag. The 'getArticles' method extracts all the text elements and creates an object. Then, the 'getTexts' method is supposed to take the text from the object and render it to html. BUT it just keeps skipping the text from the article in the middle, starting with 'Set in Australia...'. I have tried to remove another article from the html and then the missing article appeared, but it just wont include all three articles together. Help?
DOM = {
output1: document.querySelector('.output1')
};
class TextAnalyzer {
getArticles = (out) => {
this.articles = document.getElementsByTagName("text");
}
getText = (key) => {
return this.articles[key];
}
getTexts = (out) => {
const keys = Object.keys(this.articles);
console.log(keys);
keys.forEach(key => {
console.log(this.articles[key])
out.appendChild(this.articles[key])
})
}
showArticles = () => console.log(this.articles);
}
const analysis = new TextAnalyzer();
analysis.getArticles();
analysis.showArticles();
analysis.getTexts(DOM.output1);
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<section>
<doc>
<docno> LA010189-0001 </docno>
<docid> 1 </docid>
<date>
<p>
January 1, 1989, Sunday, Home Edition
</p>
</date>
<section>
<p>
Book Review; Page 1; Book Review Desk
</p>
</section>
<length>
<p>
1206 words
</p>
</length>
<headline>
<p>
NEW FALLOUT FROM CHERNOBYL;
</p>
<p>
THE SOCIAL IMPACT OF THE CHERNOBYL DISASTER BY DAVID R. MARPLES (ST. MARTIN'S
PRESS: $35, CLOTH; $14.95, PAPER; 316 PP., ILLUSTRATED; 0-312-02432-0)
</p>
</headline>
<byline>
<p>
By James E. Oberg , Oberg, a space engineer in Houston, is the author of
Uncovering Soviet Disasters: Exploring the Limits of Glasnost (Random House).
</p>
</byline>
<text>
<p>
The onset of the new Gorbachev policy of glasnost, commonly mistranslated as
openness but closer in connotation to candor or publicizing, has complicated
the task of Soviet secret-keepers and has allowed substantial new Western
insights into Soviet society. David R. Marples' new book, his second on the
Chernobyl accident of April 26, 1986, is a shining example of the best type of
non-Soviet analysis into topics that only recently were absolutely taboo in
Moscow official circles.
</p>
<p>
The author, a British-educated historian and economist, is a research associate
with the Canadian Institute of Ukrainian Studies at the University of Alberta,
and the academic style of the book is undisguised. However, its intended
audience is the general public, and anyone interested in nuclear power, or
Soviet economy and society, or human drama, or just plain sleuthing state
secrets, will find hitherto unpublished revelations and explanations of the
event and its continuing aftermath.
</p>
<p>
The effects of Chernobyl reverberated throughout so many facets of Soviet
society that a continuous coherent narrative is probably impossible. Marples
discusses half a dozen major themes arranged in a fairly arbitrary order (as
indicated by the frequent and helpful cross references throughout the text) and
succeeds in mapping out his main themes. The personal interests of each reader
determine which of the sections may be deemed too detailed and which too
sketchy, but considering the need for such a comprehensive overview, the levels
are generally appropriate.
</p>
<p>
The book is, on the one hand, not a light read, and an executive summary might
have been possible in a quarter the length. But, on the other, so many of the
judgments depend on a subtle interpretation of a multitude of sources that the
author is obligated to present the raw data for the reader's inspection. The
modular nature of the book also allows a reader to skip, browse, and revisit
earlier sections, aided by a convenient internal organization and a thorough
index.
</p>
<p>
First in the world's attention, and in the text, is a discussion of the human
victims of the accident. The official tally is 31 (only about 20 names have
ever been released), but Marples suspects there were other short-term radiation
victims. A large number of unnecessary late-term abortions were also performed
on local women, and by rights those unborn babies count as casualties.
Widespread "radiophobia" led to restricted diets which created malnourishment
and subsequent disease in thousands of people. The tens of thousands of people
taking part in cleanup operations were never included in official totals of
those exposed. Since the book went to press, Soviet military sources have
referred to at least one death in the actual reactor entombment program.
</p>
<p>
But the greatest toll is likely to occur with the delayed deaths. Here, Marples
encounters for the first time the soon familiar theme of official Soviet
myth-making around the event: Reality is twisted to serve state policy
objectives, which include calming an alarmed public with assurances that all is
well when it isn't.
</p>
<p>
And thus is born what he properly labels the "myth of Chernobyl," the official
line that the disaster provided a test that Soviet society passed with honor.
"In the Soviet view," he writes, "it was first and foremost a victory, a story
with an ending, and an ending that was triumphant."
</p>
<p>
Thus, when sober Western medical estimates placed the future "excess cancer
deaths" at several tens of thousands, both in the Soviet Union and in Europe (a
few tenths of a percent elevation of the natural cancer rate), the Soviets
reacted furiously. The estimates are branded "nonsense" and the estimators are
dismissed as "panic mongers" promulgating "anti-Soviet venom."
</p>
<p>
Subsequently the author addresses themes of environmental impact, economic and
political repercussions, public images, and the recovery operations. Along the
way, Marples provides a damning list of examples in which Soviet officials
attempted to retreat behind old-style cover-ups and outright lies. False
information was issued on radiation levels, on subsequent accidents at the
site, on contamination levels of the Kiev water supply, on severe discipline
against non-volunteer cleanup personnel, on reactor entombment schedules and on
operator training levels.
</p>
<p>
A severe 1986-1987 countrywide electrical power shortage was officially denied
although it was real enough to compel the restart of three Chernobyl reactors
in explicit violation of Soviet safety regulations. Design deficiencies of the
Chernobyl-style reactors were downplayed and human errors were declared to be
the primary culprit.
</p>
<p>
Ultimately, observes the author, "It is ironic that in an era of openness,
Chernobyl may have been both the pioneer of glasnost under Gorbachev and then
subsequently its first casualty." He ultimately concludes, "Aspects of the
disaster . . . have rarely been dealt with thoroughly or even honestly by
Soviet sources." Hence the need for this book, a need which is admirably
fulfilled despite the many remaining mysteries and uncertainties.
</p>
<p>
The July, 1987, trial of reactor personnel marked a full circle of disclosure.
Journalists were allowed into the pre-scripted first and last days, but the
weeklong deliberative sessions were held in secret and no word of their
substance has ever been released.
</p>
<p>
The propaganda purpose of the trial and surrounding official publicity, he
maintains, had one goal: "To divert culpability from the party hierarchy, in
Kiev and especially in Moscow." This is precisely the theme I have also
encountered in my own investigations of aerospace accidents of the past. Where
individual human failings led to catastrophe, a sanitized story may eventually
be released, but where Kremlin policy led to disaster (such as the Nedelin
catastrophe of 1960 or the Soyuz-1 disaster in 1967), the entire event remains
absolutely off limits to glasnost.
</p>
<p>
The closing blow-by-blow description of the nuclear power debate presages a
dramatic event which occurred too recently for inclusion in this first edition.
Viktor Legasov, tagged by the author as one of the country's two leading
pro-nuclear advocates, actually was sinking into private despair over the poor
implementation of safety standards. In the end, he made his final and most
eloquent testimony to this despair on the second anniversary of the accident,
by committing suicide. For several weeks the Soviets tried to sit on the
circumstances of his "tragic death," even issuing official non-explanations
which asserted that the death was not due to medical effects of radiation.
Finally, crusading journalist Vladimir Gubarev, with access to Legasov's
notebooks, broke the story in Pravda. Readers of this book will come to know
these and other characters so well that the suicide fits right into the "big
picture" of the catastrophe's social impacts.
</p>
<p>
For an author to so accurately describe a social milieu that subsequent
unpredictable events only enhance his insights is testimony to the highest
quality of scholarship. Readers of Marples' book will rarely be surprised as
the Chernobyl catastrophe's consequences continue to unfold in the future.
</p>
</text>
<graphic>
<p>
Photo, Chernobyl Then and Now :Photographs of the damaged reactor taken before
the construction of its concrete "sarcophagus" are, for obvious reasons, aerial
photographs. Left, an artist's reconstruction of the reactor as it would have
looked from the ground before the sarcophagus was in place. The point of view
is the same as that of an official Soviet photograph, right, taken as the
entombment neared completion.
</p>
</graphic>
<type>
<p>
Book Review; Main Story
</p>
</type>
</doc>
<doc>
<docno> LA010189-0013 </docno>
<docid> 31 </docid>
<date>
<p>
January 1, 1989, Sunday, Home Edition
</p>
</date>
<section>
<p>
Book Review; Page 10; Book Review Desk
</p>
</section>
<length>
<p>
146 words
</p>
</length>
<headline>
<p>
CURRENT PAPERBACKS: WAITING FOR CHILDHOOD BY SUMNER LOCKE ELLIOTT (PERENNIAL
LIBRARY/ HARPER & ROW: $7.95)
</p>
</headline>
<byline>
<p>
By ELENA BRUNET
</p>
</byline>
<text>
<p>
Set in Australia at the turn of the 20th Century, "Waiting for Childhood" is
the story of seven children left to cope for themselves after their parents
die. Their father, The Rev. William Lord, expires at the breakfast table one
morning. After the family leaves for a ramshackle house owned by a wealthy
cousin, the mother loses her mind and then her life in an accident.
</p>
<p>
The eldest daughter, Lily, takes charge of the entire household, as Jess
becomes a favorite of her rich cousin Jackie and watches her rival for Jackie's
affections fall fatally from a mountaintop.
</p>
<p>
These characters, "all talented, all deeply human, (are) all so beautifully
realized that by the end of the novel we identify with them to the point of
heartbreak," Carolyn See wrote in these pages. " 'Waiting for Childhood'
manages to be at once terribly melancholy and extraordinarily exhilarating."
</p>
</text>
<type>
<p>
Column; Book Review
</p>
</type>
</doc>
<doc>
<docno> LA010189-0032 </docno>
<docid> 74 </docid>
<date>
<p>
January 1, 1989, Sunday, Home Edition
</p>
</date>
<section>
<p>
Business; Part 4; Page 3; Column 1; Financial Desk
</p>
</section>
<length>
<p>
1299 words
</p>
</length>
<headline>
<p>
VIEWPOINTS;
</p>
<p>
'89 WISH LIST: PROTECTION, TAXES AND PEACE;
</p>
<p>
SOCIAL BENEFITS, DEFICIT REDUCTION ARE TOP PRIORITIES FOR THE NEW YEAR
</p>
</headline>
<text>
<p>
What changes would you like to see in business practices and the workplace this
year? How can business leaders and economic policy-makers improve the economy
and the world in general in 1989? The Times ran these questions by people in
various walks of life, and here are some of their answers:
</p>
<p>
</p>
<p>
Muriel Siebert, head of the Muriel Siebert & Co. discount brokerage in New
York, and first female member of the New York Stock Exchange:
</p>
<p>
"I would like to see certain business practices regulated. I think that the
leveraged buyouts show the greed of people at their worst. . . . The LBOs are
bypassing the purpose of the capital-raising system. I think that to the extent
that people were stockholders in these companies . . . they should be allowed
to continue to have some kind of share in the profits (after the leveraged
buyouts) because these moves were done while they were stockholders.
</p>
<p>
"Must greed be the creed? I would like to see that also rolled over to our
defense contractors. I am pro defense. I believe in a strong country because
people mistake gentility for weakness. If (contractors) cheat on defense
contracts, I don't see why they don't go to jail. . . . I just feel that if you
are a major defense contractor, you owe a fiduciary responsibility to this
country because defense expenditures are putting a pretty big toll on the
country."
</p>
<p>
Andrew Brimmer, former member of the Federal Reserve Board and head of a
Washington economics consulting firm:
</p>
<p>
"My leading wish is that the nation deal with the federal budget deficit. I
would like to see a substantial reduction in 1989 and extending over the next
three years. I would strongly recommend that we raise taxes. There should be
some moderation in the level of government expenditures, but the real problem
is the lag in revenue.
</p>
<p>
"I also would like to see more done for education by business. The kind of
education I'm talking about is at the elementary and secondary level.
Businesses are already contributing to colleges. Businesses should do likewise
for elementary and secondary schools. Business people can play a role as
counselors and teachers. A firm might make available an engineer or
mathematician to go into schools and teach. Business should do more to offer
on-the-job training for unskilled, or limited-skills, people, perhaps through a
(lower) learning wage. We would give business tax credits to do this."
</p>
<p>
William R. Robertson, executive secretary of the Los Angeles County Federation
of Labor, AFL-CIO:
</p>
<p>
"I would like to see a change in philosophy by the incoming President relating
to labor relations and providing for fairness in our (labor) organizing efforts
and contract negotiations. . . .
</p>
<p>
"I would also like to see some protection for workers losing their jobs because
of mergers. It is a national disgrace. In too many mergers, the workers are the
ones that suffer and the country as well. Something should be done to correct
it. . . .
</p>
<p>
"And, finally, this Administration should face reality in resolving the
astronomical deficit."
</p>
<p>
Steven D. Lydenberg, an associate with the "socially responsible" investment
firm of Franklin Research & Development:
</p>
<p>
"There is an increasing interest around the country in social investing. People
want to know not just the financial implications of making a commitment in a
company, but also the social implication. That information is not very easy to
come by.
</p>
<p>
"So, if at the end of '89 corporations were disclosing in a uniform way their
yield figures, their charitable contribution figures, the numbers of women and
minorities in top management and board directors, their attitude on a number of
comparable social issues, I would be very happy."
</p>
<p>
Frank Borman, chairman of Patlex Corp. of Chatsworth, former astronaut and
former chairman of Eastern Airlines:
</p>
<p>
"We should begin to move toward taxing consumption -- a value-added tax. This
is quite controversial as Al Ullman (Oregon Democrat and former chairman of the
House Ways and Means Committee, who was defeated in 1988 after advocating a
value-added tax) will tell you. But this taxing system is needed. It would
certainly help our exports. Almost all of Europe is under the value-added
taxing system. Also, it may encourage saving instead of consumption. One of the
ways you discourage consumption is to tax it."
</p>
<p>
Michael Harrington, co-chair of Democratic Socialists of America and author of
"The Other America" and "The New American Poverty":
</p>
<p>
"I hope Secretary of State Baker will build on the basic insights of former
Treasury Secretary Baker (James Baker, former treasury secretary, was nominated
by President-elect Bush to be Secretary of State) that a settlement of Third
World debt is in the self-interest of America, opening up markets for business
and labor. But then the new Baker will have to go far beyond the old, since
Latin America now owes more than it did in 1982 when the crisis officially
began, and several countries, including Argentina and Brazil, may see democracy
subverted if current trends persist.
</p>
<p>
"At home, the nation must recognize that we can't waste young people, and
particularly minorities and women, on illiteracy, unemployment and unproductive
low-wage work. We must invest mightily in education, training and job
generation."
</p>
<p>
Alan Bromberg, a securities law expert and professor at Southern Methodist
University:
</p>
<p>
"There are several things I would like most to see changed in the economy and
business practices. One, more concentration by business and government, both
here and abroad, on . . . the facilitation of international trade and
investment. This would require wider horizons for business people . . . and
more effort by government to reduce and ultimately eliminate all kinds of
restrictions on the movement of products.
</p>
<p>
"Two, I would like to see a national consensus developed, preferably in the
form of federal legislation, on corporate takeovers and buyouts that would
recognize the efficiencies and benefits they bring as well as the dislocations
and hardships they can cause. This would involve tax policies and labor polices
and limitations on the ability of states to Balkanize corporate law by
different anti-takeover statutes everywhere. (There also should be) some kind
of limitation on management self-entrenchment and self-enrichment.
</p>
<p>
"I think we could use a lot of clarification of the securities laws. I think
the courts have done a good job of saying what insider trading is. The kind of
issues that are most difficult are what really is parking (of stock)? How much
cooperation or similar action by different individuals or different groups of
individuals makes it collaboration? These issues haven't been well resolved. .
. .
</p>
<p>
Peter Bahouth, executive director of Greenpeace in Washington:
</p>
<p>
"People now view threats to human security less in terms of political threats
and more in environmental and economic terms. So for my wish list, I would ask
first that we deal with the issue of the greenhouse effect. We better develop
some alternative views in mass transportation and cut subsidies to reflect the
true cost of fossil fuels in terms of pollution, along with the actual economic
cost of development. Then, we could put more money into research and
development of wind and solar energy.
</p>
<p>
"(Also on my wish list is) peace on earth. If we want peace on earth, we have
to start looking seriously at the fact that we are making more and more
weapons, and in a process which endangers the health of American people. . . .
Production plants have been proven to have released into the air and water
radioactivity and toxic chemicals."
</p>
<p>
"Also, it would be nice if we could learn that the rain forest affects all of
us. We need to preserve it. And we would like the tuna industry to stop killing
dolphins."
</p>
</text>
<graphic>
<p>
Drawing, JILL BANASHEK / for The Times
</p>
</graphic>
</doc>
</section>
<section>
<h2>Raw Text</h2>
<div class="output1">
</div>
</section>
<script src="app.js"></script>
</body>
</html>
It happens because the order of this.articles is changing every time you use appendChild because this.articles is not an array but an HTML Collection.
DOM = {
output1: document.querySelector('.output1')
};
class TextAnalyzer {
getArticles = (out) => {
this.articles = document.getElementsByTagName("text");
}
getText = (key) => {
return this.articles[key];
}
getTexts = (out) => {
for (let i = 0; i < 5; i++) {
console.log(this.articles)
out.appendChild(this.articles[i])
}
}
showArticles = () => console.log(this.articles);
}
const analysis = new TextAnalyzer();
analysis.getArticles();
analysis.getTexts(DOM.output1);
body {
background: white
}
<text>article 0</text>
<text>article 1</text>
<text>article 2</text>
<text>article 3</text>
<text>article 4</text>
<h2>Raw Text</h2>
<div class="output1">
</div>
You can solve this by create an array from html collection (i.e. change this line):
getArticles = (out) => {
this.articles = [...document.getElementsByTagName("text")];
}
DOM = {
output1: document.querySelector('.output1')
};
class TextAnalyzer {
getArticles = (out) => {
this.articles = [...document.getElementsByTagName("text")];
}
getText = (key) => {
return this.articles[key];
}
getTexts = (out) => {
const keys = Object.keys(this.articles);
console.log(keys);
keys.forEach(key => {
console.log(this.articles[key])
out.appendChild(this.articles[key])
})
}
showArticles = () => console.log(this.articles);
}
const analysis = new TextAnalyzer();
analysis.getArticles();
analysis.showArticles();
analysis.getTexts(DOM.output1);
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<section>
<doc>
<docno> LA010189-0001 </docno>
<docid> 1 </docid>
<date>
<p>
January 1, 1989, Sunday, Home Edition
</p>
</date>
<section>
<p>
Book Review; Page 1; Book Review Desk
</p>
</section>
<length>
<p>
1206 words
</p>
</length>
<headline>
<p>
NEW FALLOUT FROM CHERNOBYL;
</p>
<p>
THE SOCIAL IMPACT OF THE CHERNOBYL DISASTER BY DAVID R. MARPLES (ST. MARTIN'S
PRESS: $35, CLOTH; $14.95, PAPER; 316 PP., ILLUSTRATED; 0-312-02432-0)
</p>
</headline>
<byline>
<p>
By James E. Oberg , Oberg, a space engineer in Houston, is the author of
Uncovering Soviet Disasters: Exploring the Limits of Glasnost (Random House).
</p>
</byline>
<text>
<p>
The onset of the new Gorbachev policy of glasnost, commonly mistranslated as
openness but closer in connotation to candor or publicizing, has complicated
the task of Soviet secret-keepers and has allowed substantial new Western
insights into Soviet society. David R. Marples' new book, his second on the
Chernobyl accident of April 26, 1986, is a shining example of the best type of
non-Soviet analysis into topics that only recently were absolutely taboo in
Moscow official circles.
</p>
<p>
The author, a British-educated historian and economist, is a research associate
with the Canadian Institute of Ukrainian Studies at the University of Alberta,
and the academic style of the book is undisguised. However, its intended
audience is the general public, and anyone interested in nuclear power, or
Soviet economy and society, or human drama, or just plain sleuthing state
secrets, will find hitherto unpublished revelations and explanations of the
event and its continuing aftermath.
</p>
<p>
The effects of Chernobyl reverberated throughout so many facets of Soviet
society that a continuous coherent narrative is probably impossible. Marples
discusses half a dozen major themes arranged in a fairly arbitrary order (as
indicated by the frequent and helpful cross references throughout the text) and
succeeds in mapping out his main themes. The personal interests of each reader
determine which of the sections may be deemed too detailed and which too
sketchy, but considering the need for such a comprehensive overview, the levels
are generally appropriate.
</p>
<p>
The book is, on the one hand, not a light read, and an executive summary might
have been possible in a quarter the length. But, on the other, so many of the
judgments depend on a subtle interpretation of a multitude of sources that the
author is obligated to present the raw data for the reader's inspection. The
modular nature of the book also allows a reader to skip, browse, and revisit
earlier sections, aided by a convenient internal organization and a thorough
index.
</p>
<p>
First in the world's attention, and in the text, is a discussion of the human
victims of the accident. The official tally is 31 (only about 20 names have
ever been released), but Marples suspects there were other short-term radiation
victims. A large number of unnecessary late-term abortions were also performed
on local women, and by rights those unborn babies count as casualties.
Widespread "radiophobia" led to restricted diets which created malnourishment
and subsequent disease in thousands of people. The tens of thousands of people
taking part in cleanup operations were never included in official totals of
those exposed. Since the book went to press, Soviet military sources have
referred to at least one death in the actual reactor entombment program.
</p>
<p>
But the greatest toll is likely to occur with the delayed deaths. Here, Marples
encounters for the first time the soon familiar theme of official Soviet
myth-making around the event: Reality is twisted to serve state policy
objectives, which include calming an alarmed public with assurances that all is
well when it isn't.
</p>
<p>
And thus is born what he properly labels the "myth of Chernobyl," the official
line that the disaster provided a test that Soviet society passed with honor.
"In the Soviet view," he writes, "it was first and foremost a victory, a story
with an ending, and an ending that was triumphant."
</p>
<p>
Thus, when sober Western medical estimates placed the future "excess cancer
deaths" at several tens of thousands, both in the Soviet Union and in Europe (a
few tenths of a percent elevation of the natural cancer rate), the Soviets
reacted furiously. The estimates are branded "nonsense" and the estimators are
dismissed as "panic mongers" promulgating "anti-Soviet venom."
</p>
<p>
Subsequently the author addresses themes of environmental impact, economic and
political repercussions, public images, and the recovery operations. Along the
way, Marples provides a damning list of examples in which Soviet officials
attempted to retreat behind old-style cover-ups and outright lies. False
information was issued on radiation levels, on subsequent accidents at the
site, on contamination levels of the Kiev water supply, on severe discipline
against non-volunteer cleanup personnel, on reactor entombment schedules and on
operator training levels.
</p>
<p>
A severe 1986-1987 countrywide electrical power shortage was officially denied
although it was real enough to compel the restart of three Chernobyl reactors
in explicit violation of Soviet safety regulations. Design deficiencies of the
Chernobyl-style reactors were downplayed and human errors were declared to be
the primary culprit.
</p>
<p>
Ultimately, observes the author, "It is ironic that in an era of openness,
Chernobyl may have been both the pioneer of glasnost under Gorbachev and then
subsequently its first casualty." He ultimately concludes, "Aspects of the
disaster . . . have rarely been dealt with thoroughly or even honestly by
Soviet sources." Hence the need for this book, a need which is admirably
fulfilled despite the many remaining mysteries and uncertainties.
</p>
<p>
The July, 1987, trial of reactor personnel marked a full circle of disclosure.
Journalists were allowed into the pre-scripted first and last days, but the
weeklong deliberative sessions were held in secret and no word of their
substance has ever been released.
</p>
<p>
The propaganda purpose of the trial and surrounding official publicity, he
maintains, had one goal: "To divert culpability from the party hierarchy, in
Kiev and especially in Moscow." This is precisely the theme I have also
encountered in my own investigations of aerospace accidents of the past. Where
individual human failings led to catastrophe, a sanitized story may eventually
be released, but where Kremlin policy led to disaster (such as the Nedelin
catastrophe of 1960 or the Soyuz-1 disaster in 1967), the entire event remains
absolutely off limits to glasnost.
</p>
<p>
The closing blow-by-blow description of the nuclear power debate presages a
dramatic event which occurred too recently for inclusion in this first edition.
Viktor Legasov, tagged by the author as one of the country's two leading
pro-nuclear advocates, actually was sinking into private despair over the poor
implementation of safety standards. In the end, he made his final and most
eloquent testimony to this despair on the second anniversary of the accident,
by committing suicide. For several weeks the Soviets tried to sit on the
circumstances of his "tragic death," even issuing official non-explanations
which asserted that the death was not due to medical effects of radiation.
Finally, crusading journalist Vladimir Gubarev, with access to Legasov's
notebooks, broke the story in Pravda. Readers of this book will come to know
these and other characters so well that the suicide fits right into the "big
picture" of the catastrophe's social impacts.
</p>
<p>
For an author to so accurately describe a social milieu that subsequent
unpredictable events only enhance his insights is testimony to the highest
quality of scholarship. Readers of Marples' book will rarely be surprised as
the Chernobyl catastrophe's consequences continue to unfold in the future.
</p>
</text>
<graphic>
<p>
Photo, Chernobyl Then and Now :Photographs of the damaged reactor taken before
the construction of its concrete "sarcophagus" are, for obvious reasons, aerial
photographs. Left, an artist's reconstruction of the reactor as it would have
looked from the ground before the sarcophagus was in place. The point of view
is the same as that of an official Soviet photograph, right, taken as the
entombment neared completion.
</p>
</graphic>
<type>
<p>
Book Review; Main Story
</p>
</type>
</doc>
<doc>
<docno> LA010189-0013 </docno>
<docid> 31 </docid>
<date>
<p>
January 1, 1989, Sunday, Home Edition
</p>
</date>
<section>
<p>
Book Review; Page 10; Book Review Desk
</p>
</section>
<length>
<p>
146 words
</p>
</length>
<headline>
<p>
CURRENT PAPERBACKS: WAITING FOR CHILDHOOD BY SUMNER LOCKE ELLIOTT (PERENNIAL
LIBRARY/ HARPER & ROW: $7.95)
</p>
</headline>
<byline>
<p>
By ELENA BRUNET
</p>
</byline>
<text>
<p>
Set in Australia at the turn of the 20th Century, "Waiting for Childhood" is
the story of seven children left to cope for themselves after their parents
die. Their father, The Rev. William Lord, expires at the breakfast table one
morning. After the family leaves for a ramshackle house owned by a wealthy
cousin, the mother loses her mind and then her life in an accident.
</p>
<p>
The eldest daughter, Lily, takes charge of the entire household, as Jess
becomes a favorite of her rich cousin Jackie and watches her rival for Jackie's
affections fall fatally from a mountaintop.
</p>
<p>
These characters, "all talented, all deeply human, (are) all so beautifully
realized that by the end of the novel we identify with them to the point of
heartbreak," Carolyn See wrote in these pages. " 'Waiting for Childhood'
manages to be at once terribly melancholy and extraordinarily exhilarating."
</p>
</text>
<type>
<p>
Column; Book Review
</p>
</type>
</doc>
<doc>
<docno> LA010189-0032 </docno>
<docid> 74 </docid>
<date>
<p>
January 1, 1989, Sunday, Home Edition
</p>
</date>
<section>
<p>
Business; Part 4; Page 3; Column 1; Financial Desk
</p>
</section>
<length>
<p>
1299 words
</p>
</length>
<headline>
<p>
VIEWPOINTS;
</p>
<p>
'89 WISH LIST: PROTECTION, TAXES AND PEACE;
</p>
<p>
SOCIAL BENEFITS, DEFICIT REDUCTION ARE TOP PRIORITIES FOR THE NEW YEAR
</p>
</headline>
<text>
<p>
What changes would you like to see in business practices and the workplace this
year? How can business leaders and economic policy-makers improve the economy
and the world in general in 1989? The Times ran these questions by people in
various walks of life, and here are some of their answers:
</p>
<p>
</p>
<p>
Muriel Siebert, head of the Muriel Siebert & Co. discount brokerage in New
York, and first female member of the New York Stock Exchange:
</p>
<p>
"I would like to see certain business practices regulated. I think that the
leveraged buyouts show the greed of people at their worst. . . . The LBOs are
bypassing the purpose of the capital-raising system. I think that to the extent
that people were stockholders in these companies . . . they should be allowed
to continue to have some kind of share in the profits (after the leveraged
buyouts) because these moves were done while they were stockholders.
</p>
<p>
"Must greed be the creed? I would like to see that also rolled over to our
defense contractors. I am pro defense. I believe in a strong country because
people mistake gentility for weakness. If (contractors) cheat on defense
contracts, I don't see why they don't go to jail. . . . I just feel that if you
are a major defense contractor, you owe a fiduciary responsibility to this
country because defense expenditures are putting a pretty big toll on the
country."
</p>
<p>
Andrew Brimmer, former member of the Federal Reserve Board and head of a
Washington economics consulting firm:
</p>
<p>
"My leading wish is that the nation deal with the federal budget deficit. I
would like to see a substantial reduction in 1989 and extending over the next
three years. I would strongly recommend that we raise taxes. There should be
some moderation in the level of government expenditures, but the real problem
is the lag in revenue.
</p>
<p>
"I also would like to see more done for education by business. The kind of
education I'm talking about is at the elementary and secondary level.
Businesses are already contributing to colleges. Businesses should do likewise
for elementary and secondary schools. Business people can play a role as
counselors and teachers. A firm might make available an engineer or
mathematician to go into schools and teach. Business should do more to offer
on-the-job training for unskilled, or limited-skills, people, perhaps through a
(lower) learning wage. We would give business tax credits to do this."
</p>
<p>
William R. Robertson, executive secretary of the Los Angeles County Federation
of Labor, AFL-CIO:
</p>
<p>
"I would like to see a change in philosophy by the incoming President relating
to labor relations and providing for fairness in our (labor) organizing efforts
and contract negotiations. . . .
</p>
<p>
"I would also like to see some protection for workers losing their jobs because
of mergers. It is a national disgrace. In too many mergers, the workers are the
ones that suffer and the country as well. Something should be done to correct
it. . . .
</p>
<p>
"And, finally, this Administration should face reality in resolving the
astronomical deficit."
</p>
<p>
Steven D. Lydenberg, an associate with the "socially responsible" investment
firm of Franklin Research & Development:
</p>
<p>
"There is an increasing interest around the country in social investing. People
want to know not just the financial implications of making a commitment in a
company, but also the social implication. That information is not very easy to
come by.
</p>
<p>
"So, if at the end of '89 corporations were disclosing in a uniform way their
yield figures, their charitable contribution figures, the numbers of women and
minorities in top management and board directors, their attitude on a number of
comparable social issues, I would be very happy."
</p>
<p>
Frank Borman, chairman of Patlex Corp. of Chatsworth, former astronaut and
former chairman of Eastern Airlines:
</p>
<p>
"We should begin to move toward taxing consumption -- a value-added tax. This
is quite controversial as Al Ullman (Oregon Democrat and former chairman of the
House Ways and Means Committee, who was defeated in 1988 after advocating a
value-added tax) will tell you. But this taxing system is needed. It would
certainly help our exports. Almost all of Europe is under the value-added
taxing system. Also, it may encourage saving instead of consumption. One of the
ways you discourage consumption is to tax it."
</p>
<p>
Michael Harrington, co-chair of Democratic Socialists of America and author of
"The Other America" and "The New American Poverty":
</p>
<p>
"I hope Secretary of State Baker will build on the basic insights of former
Treasury Secretary Baker (James Baker, former treasury secretary, was nominated
by President-elect Bush to be Secretary of State) that a settlement of Third
World debt is in the self-interest of America, opening up markets for business
and labor. But then the new Baker will have to go far beyond the old, since
Latin America now owes more than it did in 1982 when the crisis officially
began, and several countries, including Argentina and Brazil, may see democracy
subverted if current trends persist.
</p>
<p>
"At home, the nation must recognize that we can't waste young people, and
particularly minorities and women, on illiteracy, unemployment and unproductive
low-wage work. We must invest mightily in education, training and job
generation."
</p>
<p>
Alan Bromberg, a securities law expert and professor at Southern Methodist
University:
</p>
<p>
"There are several things I would like most to see changed in the economy and
business practices. One, more concentration by business and government, both
here and abroad, on . . . the facilitation of international trade and
investment. This would require wider horizons for business people . . . and
more effort by government to reduce and ultimately eliminate all kinds of
restrictions on the movement of products.
</p>
<p>
"Two, I would like to see a national consensus developed, preferably in the
form of federal legislation, on corporate takeovers and buyouts that would
recognize the efficiencies and benefits they bring as well as the dislocations
and hardships they can cause. This would involve tax policies and labor polices
and limitations on the ability of states to Balkanize corporate law by
different anti-takeover statutes everywhere. (There also should be) some kind
of limitation on management self-entrenchment and self-enrichment.
</p>
<p>
"I think we could use a lot of clarification of the securities laws. I think
the courts have done a good job of saying what insider trading is. The kind of
issues that are most difficult are what really is parking (of stock)? How much
cooperation or similar action by different individuals or different groups of
individuals makes it collaboration? These issues haven't been well resolved. .
. .
</p>
<p>
Peter Bahouth, executive director of Greenpeace in Washington:
</p>
<p>
"People now view threats to human security less in terms of political threats
and more in environmental and economic terms. So for my wish list, I would ask
first that we deal with the issue of the greenhouse effect. We better develop
some alternative views in mass transportation and cut subsidies to reflect the
true cost of fossil fuels in terms of pollution, along with the actual economic
cost of development. Then, we could put more money into research and
development of wind and solar energy.
</p>
<p>
"(Also on my wish list is) peace on earth. If we want peace on earth, we have
to start looking seriously at the fact that we are making more and more
weapons, and in a process which endangers the health of American people. . . .
Production plants have been proven to have released into the air and water
radioactivity and toxic chemicals."
</p>
<p>
"Also, it would be nice if we could learn that the rain forest affects all of
us. We need to preserve it. And we would like the tuna industry to stop killing
dolphins."
</p>
</text>
<graphic>
<p>
Drawing, JILL BANASHEK / for The Times
</p>
</graphic>
</doc>
</section>
<section>
<h2>Raw Text</h2>
<div class="output1">
</div>
</section>
<script src="app.js"></script>
</body>
</html>
I'm brand new to AJAX, but I'm working on a sort of gallery. The idea is to have a number of thumbnail images and to populate a div with information from an xml file, depending on which image is pressed. I'm having a hard time getting information from my xml file to display in on my html page and would be really grateful if someone could help point me in the right direction.
HTML:
<!DOCTYPE html>
<html>
<head>
<script src="loadXML.js" /></script>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<h1>Interesting Animals</h1>
<div id="gallery">
<ul>
<li><button type="button" onClick="loadXML(0)"><img src="images/bat_thumb.png"></button></li>
<li><button type="button" onClick="loadXML(1)"><img src="images/elephant_thumb.png"></button></li>
<li><button type="button" onClick="loadXML(2)"><img src="images/bear_thumb.png"></button></li>
<li><button type="button" onClick="loadXML(3)"><img src="images/rhino_thumb.png"></button></li>
<li><button type="button" onClick="loadXML(4)"><img src="images/meerkat_thumb.png"></button></li>
</ul>
<div id="animalInfo">
<img src="images/bat.png">
<div id="animalText">
<h2 id="commonName">Giant Fruit Bat</h2>
<p><span class="description">Scientific Name: </span><span id="scientificName">Pteropus Scapulatus</span></p>
<p><span class="description">Diet: </span><span id="diet">Fruit</span></p>
<p><span class="description">Habitat: </span><span id="habitat">Southern and Southeast Asia</span></p>
<p><span class="description">Interesting Facts: </span><span id="facts">The giant fruit bat has a wing span of up to 5 feet (1.5m). It is the largest bat in the world. It has a very keen sense of smell and a very long muzzle. They roost upside down in the trees and wrap their wings around their bodies. Feeding time is at dusk when they set off to eat fruit. They squish fruit in their jaws and drink the juice but let the seeds and the rest of the fruit fall to the ground. The females give birth to one baby at a time. They will carry their baby around with them for two months.</p>
</div><!--animalText-->
</div><!--animalInfo-->
<ul>
<li><button type="button" onClick="loadXML(5)"><img src="images/koala_thumb.png"></button></li>
<li><button type="button" onClick="loadXML(6)"><img src="images/alpaca_thumb.png"></button></li>
<li><button type="button" onClick="loadXML(7)"><img src="images/platypus_thumb.png"></button></li>
<li><button type="button" onClick="loadXML(8)"><img src="images/roadrunner_thumb.png"></button></li>
<li><button type="button" onClick="loadXML(9)"><img src="images/gorilla_thumb.png"></button></li>
</ul>
</div>
</div><!--wrapper-->
</body>
</html>
Javascript:
var xmlhttp;
function loadXML() {
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // code for IE6-
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
changeDiv();
}
}
xmlhttp.open("GET", "animals.xml", "true");
xmlhttp.send();
}
function changeDiv() {
var xmlResponse = xmlhttp.responseXML;
root = xmlResponse.documentElement;
common = root.getElementByTagName("commonName");
scientific = root.getElementByTagName("scientificName");
food = root.getElementByTagName("diet");
environment = root.getElementByTagName("habitat");
interestingFacts = root.getElementByTagName("facts");
document.getElementById("commonName").innerHTML= common.item(1).firstChild.data;
document.getElementById("scientificName").innerHTML= scientific.item(1).firstChild.data;
document.getElementById("diet").innerHTML= food.item(1).firstChild.data;
document.getElementById("habitat").innerHTML= environment.item(1).firstChild.data;
document.getElementById("facts").innerHTML= interestingFacts.item(1).firstChild.data;
}
XML:
<?xml version="1.0"?>
<!DOCTYPE allAnimals [
<!ELEMENT allAnimals (animal+)>
<!ELEMENT animal (commonName, scientificName, diet, habitat, facts)>
<!ELEMENT commonName (#PCDATA)>
<!ELEMENT scientificName (#PCDATA)>
<!ELEMENT diet (#PCDATA)>
<!ELEMENT habitat (#PCDATA)>
<!ELEMENT facts (#PCDATA)>
]>
<allAnimals>
<animal>
<commonName>Giant Fruit Bat or Flying Fox</commonName>
<scientificName>Pteropus Scapulatus</scientificName>
<diet>Fruit</diet>
<habitat>Southern and Southeast Asia</habitat>
<facts>The giant fruit bat has a wing span of up to 5 feet (1.5m). It is the largest bat in the world. It has a very keen sense of smell and a very long muzzle. They roost upside down in the trees and wrap their wings around their bodies. Feeding time is at dusk when they set off to eat fruit. They squish fruit in their jaws and drink the juice but let the seeds and the rest of the fruit fall to the ground. The females give birth to one baby at a time. They will carry their baby around with them for two months.</facts>
</animal>
<animal>
<commonName>African Elephant</commonName>
<scientificName>Loxodonta Africana</scientificName>
<diet>Leaves, branches, and fruit</diet>
<habitat>Africa, south of the Sahara Desert</habitat>
<facts>The African Elephant is the world's largest land animal. Adult males can weigh as much as six tons. They drink more than 25 gallons (100 liters) of water each day and eat up to 650 lbs. (300kg) of food. The trunks of African elephants have two tips which they use like fingertips to pick things up. African elephant calves feed on milk for up to 18 months, and do not breed until at least 11 years old.</facts>
</animal>
<animal>
<commonName>American Black Bear</commonName>
<scientificName>Ursus Americanus</scientificName>
<diet>Vegetation, honey, insects, and fish</diet>
<habitat>North America, including northern Mexico</habitat>
<facts>These bears are often found in national parks, where they raid campsites for food. They have a keen sense of smell, and usually hunt at night. They are smaller and less dangerous than their brown bear cousins, like the Grizzly. The American Black Bear will hibernate during the winter months, but if it is disturbed it can wake up because it doesn't sleep too deeply. American black bears will avoid people, but they will defend their cubs if they feel threatened.</facts>
</animal>
<animal>
<commonName>White Rhinoceros</commonName>
<scientificName>Ceratotherium Simum</scientificName>
<diet>Grass</diet>
<habitat>Africa</habitat>
<facts>White rhinoceroses are very large. In fact, they are the second largest land animal after elephants and can weigh as much as 3.5 tons. The diet of the White Rhino is mainly made up of grass, which they find growing in large open plains. These magnificent animals have poor eyesight but exceptional hearing and a keen sense of smell. Scientists estimate that there are currently less than 7,000 white rhinos left in the wild.</facts>
</animal>
<animal>
<commonName>Meerkat</commonName>
<scientificName>Suricata Suricatta</scientificName>
<diet>Insects and birds</diet>
<habitat>Southern Africa</habitat>
<facts>Meerkats feed together during the day in groups of 20-30 individuals in dry open country. This makes them a target for predators. While some members of a meerkat group look for insects, others act as lookouts popping up on their hind legs and tails. Living in large groups helps meerkats to survive. They shelter in underground burrows.</facts>
</animal>
<animal>
<commonName>Koala</commonName>
<scientificName>Phascolarctos Cinereus</scientificName>
<diet>Eucalyptus leaves</diet>
<habitat>Eastern Australia</habitat>
<facts>Koalas are very popular animals. Often called koala bears, koalas are actually not bears at all but marsupials. They have sharp claws that allow them to climb trees to find their food. Koalas only eat eucalyptus leaves. They never need to drink water because eucalyptus leaves provide all the water they need. Female koalas have one baby at a time. The female's pouch open near the rear of her body.</facts>
</animal>
<animal>
<commonName>Alpaca</commonName>
<scientificName>Vicugna Pacos</scientificName>
<diet>Grass</diet>
<habitat>South America</habitat>
<facts>Alpacas are a domesticated descendant of guanacos. Instead of working as a pack animal, alpacas are bred and raised for their high quality wool, which is used to make yarn and other products. Some alpacas' wool grows so long that it will almost touch the ground. Alpacas feed on grass, unlike its other South American relatives which feed on bushes.</facts>
</animal>
<animal>
<commonName>Platypus</commonName>
<scientificName>Ornithorhynchus Anatinus</scientificName>
<diet>Insects and crustaceans</diet>
<habitat>Eastern Australia and Tasmania</habitat>
<facts>The platypus is one of only three species of mammals that lay eggs. It has a fur-covered body, webbed feet, and a wide beak. It looks sort of like a beaver with a bird's beak. Platypuses find their food at the bottom of the lakes and rivers where they live. They use their sensitive beak to feel for and find food. Male platypuses have a defense against predators: Their hind legs have poisonous spurs, which can leave a painful wound.</facts>
</animal>
<animal>
<commonName>Greater Roadrunner</commonName>
<scientificName>Geococcyx Californianus</scientificName>
<diet>Lizards and snakes, insects, scorpions to small rodents and small birds, hummingbirds, some fruit</diet>
<habitat>Southwestern United States and central Mexico</habitat>
<facts>The Greater Roadrunner is one of the few animals that will attack a rattlesnake. To kill this snake, the roadrunner grabs the snake just behind the head, then it hits it against the ground or rocks. Roadrunners live in pairs, defending their area all year.</facts>
</animal>
<animal>
<commonName>Western Gorilla</commonName>
<scientificName>Gorilla Gorilla</scientificName>
<diet>Leaves</diet>
<habitat>Western and Central Africa</habitat>
<facts>Gorillas are the largest of the great apes. Great apes can stand on their hind legs. They are also very good with their hands and can use wooden sticks like tools. Gorillas live in groups of up to 20 animals. They eat in the trees and on the ground.</facts>
</animal>
</allAnimals>
Declare xmlhttp variable outside the loadXML() function to make it global so you will be able to access it in changeDiv() function:
var xmlhttp;
function loadXML() { ... }
function changeDiv() { ... }
Other solution is to send it as an argument of changeDiv().
function loadXml() {
...
changeDiv(xmlhttp);
...
}
function changeDiv(xmlhttp) { ... }
I'm working on a web app that allows a user to select some text, click a button, and save the highlighted text. This works great in desktop browsers, (chrome for this example), but in iOS I'm having issues with the native text selection, where the user can change the selected text.
Here is the JsFiddle showing the issue (issue only exists in iOS): http://jsfiddle.net/JasonMore/gWZfb/
User starts text selection
User expands their text selection, and clicks "Show the selected text above"
Only the first selected word "The" shows up, even though I want "The Path of the righteous man"
1 Begin
2 Select Text and hit button
3 Only "The"
Here is the JS I am using:
$(function() {
$('#actionButton').click(function() {
$('#result').text(selectedRange.toString());
});
$('#slipsum').on('mouseup touchend','p', function() {
getSelectedRange();
});
});
var selectedRange = null;
var getSelectedRange = function() {
if (window.getSelection) {
selectedRange = window.getSelection().getRangeAt(0);
} else {
selectedRange = document.getSelection().getRangeAt(0);
}
};
HTML:
<h3>Selected Text:</h3>
<p id="result">
</p>
<br/>
<p>
<input type="button" id="actionButton" value="Show the selected text above" />
</p>
<!-- start slipsum code -->
<div id="slipsum">
<h1>Is she dead, yes or no?</h1>
<p>Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my shirt with my name printed on it? Do you see a little Asian child with a blank expression on his face sitting outside on a mechanical helicopter that shakes when you put quarters in it? No? Well, that's what you see at a toy store. And you must think you're in a toy store, because you're here shopping for an infant named Jeb. </p>
<h1>So, you cold?</h1>
<p>The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children. And I will strike down upon thee with great vengeance and furious anger those who would attempt to poison and destroy My brothers. And you will know My name is the Lord when I lay My vengeance upon thee. </p>
<h1>I'm serious as a heart attack</h1>
<p>Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my shirt with my name printed on it? Do you see a little Asian child with a blank expression on his face sitting outside on a mechanical helicopter that shakes when you put quarters in it? No? Well, that's what you see at a toy store. And you must think you're in a toy store, because you're here shopping for an infant named Jeb. </p>
<h1>Is she dead, yes or no?</h1>
<p>Like you, I used to think the world was this great place where everybody lived by the same standards I did, then some kid with a nail showed me I was living in his world, a world where chaos rules not order, a world where righteousness is not rewarded. That's Cesar's world, and if you're not willing to play by his rules, then you're gonna have to pay the price. </p>
<h1>Is she dead, yes or no?</h1>
<p>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends. </p>
</div>
<!-- please do not remove this line -->
<div style="display:none;">
lorem ipsum</div>
<!-- end slipsum code -->
To anyone who stumbles upon this issue in the future, here is the resolution:
http://jsfiddle.net/JasonMore/gWZfb/
$(function() {
$('#actionButton').click(function() {
if (selectedRange) {
$('#result').text(selectedRange.toString());
clearInterval(timer);
}
});
timer = setInterval(getSelectedRange, 150);
});
var timer = null;
var selectedRange = null;
var getSelectedRange = function() {
try {
if (window.getSelection) {
selectedRange = window.getSelection().getRangeAt(0);
} else {
selectedRange = document.getSelection().getRangeAt(0);
}
} catch (err) {
}
};