I've been working on a site for school, and for some reason when I attempt to change the link for the source the console outputs
Uncaught TypeError: Cannot set property 'href' of null
at pierre (pierre.html:49)
at HTMLButtonElement.onclick (pierre.html:60)
I attempted to fix this by changing the ids but it also didn't work, even copying and pasting the 'link1' line over the 'link2' line does not work.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="pierre, omidyar, bourne">
<title id="title">Pierre Omidyar</title>
</head>
<script>
var x = 0;
function pierre() {
if (x == 0) {
x = 1
document.getElementById('title').innerHTML='Pierre\xa0Bourne';
document.getElementById('heading').innerHTML='Pierre\xa0Bourne';
document.getElementById('tag').play();
document.getElementById('image1').src='https://cdn3.pitchfork.com/longform/699/Pierre1.jpg';
document.getElementById('cite1').innerHTML = "Sheldon Pearce, Pitchfork.com, 2019";
document.getElementById('para1').innerHTML = "Jordan Timothy Jenks, known professionally as Pi\'erre Bourne, is a Belizean-American record producer, rapper, songwriter, and audio engineer. He is known for producing the singles \"Magnolia\" by Playboi Carti, and \"Gummo\" by 6ix9ine, with the two peaking at number 29 and 12 on the US Billboard Hot 100 respectively.";
document.getElementById('link1').href = "https://en.wikipedia.org/wiki/Pierre_Bourne";
document.getElementById('image2').src='https://cdn3.pitchfork.com/longform/699/Pierre4.jpg';
document.getElementById('para2').innerHTML = "Songs Pierre Bourne has produced";
document.getElementById('l1o1').innerHTML = "Magnolia";
document.getElementById('l1o2').innerHTML = "wokeuplikethis*";
document.getElementById('l1o3').innerHTML = "Pissy Pamper";
document.getElementById('l1o4').innerHTML = "Pain 1993";
document.getElementById('link2').href = "https://en.wikipedia.org/wiki/Pierre_Bourne";
document.getElementById('para3').innerHTML = "He was born in Fort Riley, Kansas but grew up in Columbia, South Carolina to a military family from Queens, New York. Growing up, he would spend his summers with his grandmother in Queens, which lead to his interest in East Coast hip hop artists such as Dipset and G-Unit. He is related to Mobile Malachi, a Belizean Kriol Reggae artist and musician. He is also a cousin of Papoose, who is of Liberian descent."
document.getElementById('para4').innerHTML = "Jenks began producing for Young Nudy and Trippie Redd in 2016. He met Playboi Carti in February 2017, collaborating on the track \"Woke Up Like This\" and producing most tracks on his debut project. Their song \"Magnolia\" peaked at 29 on the US Billboard Hot 100. This kickstarted Jenks' producing career, producing songs for 21 Savage, Trippie Redd, Rich the Kid, Lil Yachty, Famous Dex, Nav, Young Thug and Lil Uzi Vert. Jenks has also released a series of mixtapes called The Life of Pi'erre and has his own imprint, SossHouse, at Interscope Records. He produced Travis Scott's single \"Watch\" which features Kanye West and Lil Uzi Vert. He also produced Playboi Carti's album Die Lit. He also helped produce for Kanye West's albums Ye and Jesus Is King.";
document.getElementById("link3").href = "https://en.wikipedia.org/wiki/Pierre_Bourne";
document.getElementById('para5').innerHTML = "Pierre Bourne has been hooked on the anime show Bleach since a two-week beat-making excursion to Tokyo earlier in the month. “'Bleach' is kind of accurate to how it looks over there [in Japan]. It reminds me of the neighborhoods I was walking through. So, that’s why I’ve been watching that a lot. Like, a lot a lot.”";
document.getElementById("link4").href = "https://www.highsnobiety.com/p/pierre-bourne-interview";
}
else {
x = 0
document.getElementById('title').innerHTML='Pierre\xa0Omidyar';
document.getElementById('heading').innerHTML='Pierre\xa0Omidyar';
document.getElementById('tag').pause();
document.getElementById('image1').src='https://upload.wikimedia.org/wikipedia/commons/0/0b/Pierre_Omidyar_%2850911249%29.jpg';
document.getElementById('cite1').innerHTML = "JD Lasica, Flickr.com, 2005";
document.getElementById('para1').innerHTML="Pierre Morad Omidyar is an American billionaire entrepreneur, software engineer and philanthropist. He is the founder of eBay where he served as chairman from 1998 to 2015. He became a billionaire at the age of 31 with eBay's 1998 initial public offering (IPO).Omidyar and his wife Pamela are philanthropists who founded Omidyar Network in 2004 in order to expand their efforts beyond non-profits to include for-profits and public policy.";
document.getElementById('link1').href = "https://en.wikipedia.org/wiki/Pierre_Omidyar"
document.getElementById('image2').src='https://upload.wikimedia.org/wikipedia/commons/thumb/e/e2/Pomidyarji.jpg/800px-Pomidyarji.jpg';
document.getElementById('para2').innerHTML = "Companies Pierre Omidyar has Founded";
document.getElementById('l1o1').innerHTML = "eBay";
document.getElementById('l1o2').innerHTML = "First Look Media";
document.getElementById('l1o3').innerHTML = "Honolulu Civil Beat";
document.getElementById('l1o4').innerHTML = "Omidyar Network";
document.getElementById('para3').innerHTML = "Omidyar was born in Paris, the son of Iranian parents who migrated to France for higher education. He was given the name of Parviz. His father, Cyrus Omidyar, is a surgeon who worked as a urologist at Johns Hopkins University in Baltimore and now practices in Aliso Viejo, California. Due to his father's work, the family moved to the US when Omidyar was a child. His mother, who did her doctorate in linguistics at the Sorbonne, is an academic.";
document.getElementById('link2').href = "https://en.wikipedia.org/wiki/Pierre_Omidyar";
document.getElementById('para4').innerHTML = "In 1991, he co-founded Ink Development, a pen-based computing startup that later was rebranded as an e-commerce company and was renamed eShop Inc. Microsoft acquired eShop on June 11, 1996, for less than $50 million and Omidyar earned $1 million from the deal. In 1995, at the age of 28, Omidyar began to write the original computer code for an online venue to enable the listing of a direct person-to-person auction for collectible items. He created a simple prototype on his personal web page, and on Labor Day, Monday, September 4, 1995, he launched an online service called Auction Web, which would eventually become the auction site eBay. In 2013, prompted by the Edward Snowden leaks, Omidyar announced the creation of First Look Media, a journalism venture launched on February 10, 2014, with The Intercept and including such journalists as Glenn Greenwald, Laura Poitras, Jeremy Scahill, Dan Froomkin, John Temple, and Jay Rosen.";
document.getElementById('link3').href = "https://en.wikipedia.org/wiki/Pierre_Omidyar";
document.getElementById('para5').innerHTML = "Omidyar has been part of the executive producer team for the films \"Merchants of Doubt\" (2014) and \"Spotlight\" (2015)"
document.getElementById('link4').href = "https://en.wikipedia.org/wiki/Pierre_Omidyar";
}
}
</script>
<body>
<audio id="tag"><source src="https://codehs.com/uploads/9af74ff56cf4b8ed3809fba276efa59e" type="audio/mpeg"></audio>
<h1 id="heading">Pierre Omidyar</h1>
<button onclick="pierre()" type="button"><em>Swap!</em></button><br>
<img height=50% width=50% id="image1" src="https://upload.wikimedia.org/wikipedia/commons/0/0b/Pierre_Omidyar_%2850911249%29.jpg"/><br>
<cite id="cite1">JD Lasica, Flickr.com, 2005</cite><br>
<span id="para1">Pierre Morad Omidyar is an American billionaire entrepreneur, software engineer and philanthropist. He is the founder of eBay where he served as chairman from 1998 to 2015. He became a billionaire at the age of 31 with eBay's 1998 initial public offering (IPO).Omidyar and his wife Pamela are philanthropists who founded Omidyar Network in 2004 in order to expand their efforts beyond non-profits to include for-profits and public policy.</span><br>
<a id="link1" href="https://en.wikipedia.org/wiki/Pierre_Omidyar"><b>Source</b></a><br>
<hr>
<h1>What has Pierre done?</h1>
<img height=50% width=50% id="image2" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e2/Pomidyarji.jpg/800px-Pomidyarji.jpg"/><br>
<span id="para2">Companies Pierre Omidyar has Founded</span>
<ul>
<li id="l1o1">eBay</li>
<li id="l1o2">First Look Media</li>
<li id="l1o3">Honolulu Civil Beat</li>
<li id="l1o4">Omidyar Network</li>
</ul>
<hr>
<h1>Family Info</h1>
<p id="para3">Omidyar was born in Paris, the son of Iranian parents who migrated to France for higher education. He was given the name of Parviz. His father, Cyrus Omidyar, is a surgeon who worked as a urologist at Johns Hopkins University in Baltimore and now practices in Aliso Viejo, California. Due to his father's work, the family moved to the US when Omidyar was a child. His mother, who did her doctorate in linguistics at the Sorbonne, is an academic.</span><br>
<a id="link2" href="https://en.wikipedia.org/wiki/Pierre_Omidyar"><b>Source</b></a><br>
<hr>
<h1>Professional Info</h1>
<p id="para4">In 1991, he co-founded Ink Development, a pen-based computing startup that later was rebranded as an e-commerce company and was renamed eShop Inc. Microsoft acquired eShop on June 11, 1996, for less than $50 million and Omidyar earned $1 million from the deal. In 1995, at the age of 28, Omidyar began to write the original computer code for an online venue to enable the listing of a direct person-to-person auction for collectible items. He created a simple prototype on his personal web page, and on Labor Day, Monday, September 4, 1995, he launched an online service called Auction Web, which would eventually become the auction site eBay. In 2013, prompted by the Edward Snowden leaks, Omidyar announced the creation of First Look Media, a journalism venture launched on February 10, 2014, with The Intercept and including such journalists as Glenn Greenwald, Laura Poitras, Jeremy Scahill, Dan Froomkin, John Temple, and Jay Rosen.</span><br>
<a id="link3" href="https://en.wikipedia.org/wiki/Pierre_Omidyar"><b>Source</b></a>
<hr>
<h1>Hobby Info</h1>
<p id="para5">Omidyar has been part of the executive producer team for the films "Merchants of Doubt" (2014) and "Spotlight" (2015)</span><br>
<a id="link4" href="https://en.wikipedia.org/wiki/Pierre_Omidyar"><b>Source</b></a>
<hr>
</body>
</html>
It looks like the problem was mismatching the start and end span/p tags for the para information.
HTML with mismatched opening and closing tags causes the javascript DOM parser to miss elements despite them actually being on the page.
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>
Trying to remake this effect where the user clicks 'read more' and the bio expands and they can click 'show less' to display partial bio. I thought maybe it was some javascript to display or hide different sections of html. I ripped part of the html and Javascript I thought created this effect and put it into code.pen.io but it didn't work.. What'd I do wrong?
http://www.nealcommunities.com/about/management-team/
My code pen try : http://codepen.io/danieltaki/pen/VjJbkQ
HTML
<li>
<div class="excerpt RTETextWrapper">
<div>
<p>Pat is a conscientious developer, a master builder and the visionary leader of Neal Communities. He is the third generation in his family to be a builder/developer in this community. A graduate of the esteemed Wharton School of Finance, he was a respected member of the Florida Legislature for 12 years, serving our community in the House of Representatives and the Senate, where he was appointed Chairman of the Senate Appropriations Committee. During this time, he was honored with every one of Florida’s top environmental awards. Since 1970, Pat Neal has built more than 10,000 homes with integrity and commitment in the finest communities, and the awards he has earned in his builder developer career continue to complement his political accomplishments. He is a respected leader and inspirational philanthropist. A snapshot of Pat Neal’s accomplishments:</p>
<ul>
<li>Florida State Senate 1978-86</li>
<li>Chairman, Senate Appropriations Committee</li>
<li>Chairman, Committee on Natural Resources</li>
<li>Member, Florida House of Representatives, 1974-78</li>
<li>Chair, Florida Commission on Ethics, 2000-01</li>
<li>Chair, Florida Commission on Ethics, 2002</li>
</ul> Read More...
</div>
</div>
<!-- content -->
<div class="content RTETextWrapper">
<div>
<p>Pat is a conscientious developer, master builder and visionary leader of Neal Communities. He is the third generation in his family to be a builder/developer in this community. A graduate of the esteemed Wharton School of Finance, he was a respected member of the Florida Legislature for 12 years, serving our community in the House of Representatives and the Senate, where he was appointed Chairman of the Senate Appropriations Committee. During this time, he was honored with every one of Florida’s top environmental awards. Since 1970, Pat Neal has built more than 10,000 homes with integrity and commitment in the finest communities, and the awards he has earned in his builder developer career continue to complement his political accomplishments. He is a respected leader and inspirational philanthropist. A snapshot of Pat Neal’s accomplishments:</p>
<ul>
<li>Florida State Senate 1978-86</li>
<li>Chairman, Senate Appropriations Committee</li>
<li>Chairman, Committee on Natural Resources</li>
<li>Member, Florida House of Representatives, 1974-78</li>
<li>Chair, Florida Commission on Ethics, 2000-01</li>
<li>Chair, Florida Commission on Ethics, 2002</li>
<li>Sierra Club Legislative Award, 1984</li>
<li>Florida Audubon Society Legislative Award, 1983</li>
<li>Professional Achievement Award, Professional Builder Magazine</li>
<li>Best master Planned Community in the United States (University Park), National Association of Home Builders and Professional Builder Magazine</li>
<li>Hearthstone Builder Public Service Honor Roll, Builder Magazine and Hearthstone Advisors, 2002</li>
<li>Advisory Board, The Trust for Public Land, Florida 2001-2002</li>
<li>Board of Directors, Florida TaxWatch, Inc. 1989, 2000-present</li>
<li>TIGER Award from the Florida Education Association/United 1983</li>
<li>Four-time recipient of the Florida Association of Community Colleges Legislative Service Award</li>
<li>Allen Morris Award for Most Effective Member of the Senate in Committee 1984</li>
<li>Future of the Region Award – Best Community, Tampa Bay Regional Planning Council (University Park)</li>
<li>Ed H. Price Humanitarian Award 2002</li>
<li>John A. Clarke Humanitarian Award 2007</li>
<li>Best Boss, Sarasota Biz941 2007</li>
<li>Community Leadership Award 2008</li>
</ul> ...Read Less
</div>
</div>
<!-- content -->
<div class="clear"></div>
</li>
</div>
</div>
Javascript Code
$(function(){
// expand
$('ul .showMore').click(function(){
var $excerpt = $(this).parent().parent();
$excerpt.hide();
$excerpt.next('.content').show();
return false;
});
$('ul .showLess').click(function(){
var $content = $(this).parent().parent();
$content.hide();
$content.prev('.excerpt').show();
return false;
});
$('ul .showMore').text('read more');
$('ul .showLess').text('read less');
});
You did in fact forget to include jQuery in your CodePen, but additionally, the jQuery that was in place was still not working.
I've learned the hard way that navigating with lots of .parent() calls is not a good way to navigate the DOM.
Here's an Updated CodePen for your reference.
I've only changed two things:
I added the CSS to hide the content by default:
.content.RTETextWrapper {
display: none;
}
I modified your jQuery to use a more reliable method of finding the appropriate elements, using closest and find. And, for fun, I threw in some slideUp and slideDown animation:
// "No-conflict-safe" document ready
jQuery(function($) {
$('a.showMore').click(function() {
// Go UP the DOM and find the closest parent li, THEN find that li's .excerpt element
$(this).closest('li').find('.excerpt').slideUp('fast');
// Go UP the DOM and find the closest parent li, THEN find that li's .content element
$(this).closest('li').find('.content').slideDown('slow');
return false;
});
$('a.showLess').click(function() {
$(this).closest('li').find('.excerpt').slideDown('slow');
$(this).closest('li').find('.content').slideUp('fast');
return false;
});
});
Can anyone help me, i have a simple yet complicated problem. I want to make it like below
Something like if you click on one picture the others will have a shade on it.
The page im working on now is http://www.3cwaremarketing.com/VisiSite/company-10/team/
Thanks for your help. You can see the details below.
HTML
function changeIt(objName) {
//The image object accessed through its id we mentioned in the DIV block which is going to be visible currently
var obj = document.getElementById(objName);
//An array that hold the IDs of images that we mentioned in their DIV blocks
var objId = new Array();
//Storing the image IDs into the array starts here
objId[0] = "image1";
objId[1] = "image2";
objId[2] = "image3";
objId[3] = "image4";
objId[4] = "image5";
//Storing the image IDs into the array ends here
//A counter variable going to use for iteration
var i;
//A variable that can hold all the other object references other than the object which is going to be visible
var tempObj;
//The following loop does the display of a single image based on its ID. The image whose ID we passed into this function will be the
//only image that is displayed rest of the images will be hidden based on their IDs and that part has been handled by the else part
//of the if statement within this loop.
for (i = 0; i < objId.length; i++) {
if (objName == objId[i]) {
obj.style.display = "block";
} else {
tempObj = document.getElementById(objId[i]);
tempObj.style.display = "none";
}
}
return;
}
<a name="isaac"></a>
<a id="one" href="#isaac" onclick="changeIt('image1');">
<img src="http://www.3cwaremarketing.com/VisiSite/wp-content/uploads/2015/05/Isaac1.jpg" border="0" alt="one" />
</a>
<a name="alan"></a>
<a id="two" href="#alan" onclick="changeIt('image2');">
<img src="http://www.3cwaremarketing.com/VisiSite/wp-content/uploads/2015/05/ed.jpg" border="0" alt="two" />
</a>
<a name="ed"></a>
<a id="three" href="#ed" onclick="changeIt('image3');">
<img src="http://www.3cwaremarketing.com/VisiSite/wp-content/uploads/2015/05/alan.jpg" border="0" alt="three" />
</a>
<a name="matt"></a>
<a id="four" href="#matt" onclick="changeIt('image4');">
<img src="http://www.3cwaremarketing.com/VisiSite/wp-content/uploads/2015/05/matt.jpg" border="0" alt="four" />
</a>
<br>
<br>
<div id="image1">
<h2>Isaac W. Jacobson</h2>
VP Business Development
<br>
<br>Mr. Jacobson brings a wealth of executive experience and professional relationships, having assembled top-tier executive teams and boards of directors for technology companies, syndicating venture capital, and buying and selling companies throughout
his career. He has held executive positions with media and technology entities such as theDial.com, Digonex Technologies, MusicRebellion, Digital Kiosk Technologies, Humanizing Technologies and eTAGZ Inc. In addition to building and growing technology
companies, Mr. Jacobson has had ownership interests across other sectors including precious metals, professional sports teams, and import/export companies working with the countries of Mexico, China, and the United Kingdom. A popular speaker and trusted
advisor to power brokers, he is often sought out by those in the highest ranks of business, politics, and entertainment to strategize on issues ranging from acquisitions, investments, and public policy to personal growth and bringing to market innovative
ideas. Mr. Jacobson is dedicated to his community, having established or served on numerous non-profit boards including the Snow College Foundation Board, the UVU Foundation Board, the Hispanic Chamber of Commerce, and the Family Defense PAC. He is
an avid donor and fundraiser for Republican political candidates and meaningful political initiatives to further Utah�s thriving business environment and family values. Mr. Jacobson is a father of three and he and his wife Tara reside in Mapleton, Utah.
</div>
<div id="image2" style="display:none">
<h2>Alan W. Bunker</h2>
CFO
<br>
<br>Mr. Bunker founded Spectrum Field Services with two other partners in 1987. A CPA and MBA, he has enjoyed an extensive career as a top executive in the public accounting, retail department store, real estate development, and health care industries.
He also has worked as an adjunct professor at the University of Utah. As a Senior Consultant with KPMG Peat Marwick in San Francisco, Mr. Bunker performed numerous consulting engagements in the savings and loan industry. He later became the Executive
Vice President and Chief Operating Officer of a real estate development firm, with major multi-family residential projects in Texas, Colorado, and Washington. Mr. Bunker has been heavily involved in the field service industry for over 20 years through
his participation with several industry-related associations. He periodically contributes articles to industry publications, and frequently has chaired committees and panels, including committees responsible for the development of field service standards
and procedures and technology advances for the industry. A long-time member of the Board of Governors of the National Association of Mortgage Field Services (NAMFS), Mr. Bunker is a past president of that organization.
</div>
<div id="image3" style="display:none">
<h2>Ed Bruno</h2>VP of Sales
<br>
<br>Mr. Bruno is an 18-year sales veteran with a performance record anchored on results. He has co-founded several start-ups, played a central role in three merger and acquisition events and lead sales teams of over 80 people to deliver on annual budgets
in excess of $400 million. His expertise crosses numerous business channels including media, technology, corporate communications, intellectual property, licensing, and webcast solutions. Mr. Bruno has held senior leadership roles including COO, CBO,
and VP of Sales in nine companies, two of them public. Mr. Bruno was voted into the �40 Under 40� by the Seattle Business Examiner. He holds Masters Degrees in English and Rhetorical Studies from Oregon State University</div>
<div id="image4" style="display:none">
<h2>A. Matthew Bunker</h2>VP Business Development
<br>
<br>Mr. Bunker is a natural-born networker and connector. He started his career as a staff member of the U.S. Senate Committee on the Judiciary in Washington, DC where he primarily focused on U.S. immigration policy but also assisted with judicial nominations
and crime legislation. Following his tenure with the Senate, Mr. Bunker continued to work with Congress with a government affairs and sports representation group. He also worked closely with the National Basketball Referees Association. Following his
career in Washington, DC, Mr. Bunker turned his attention to higher education, specifically building alumni associations. He was the Alumni Director for Salt Lake Community College, where he took their alumni activity from 32 active members to over
30,000 active members in under four years. Then he worked as the Alumni Manager with the MBA program at Brigham Young University. He organized its worldwide network of MBA alumni; focusing a great deal on social and new media, email marketing, and other
methods of connecting people together. Mr. Bunker speaks fluent Spanish. He holds a Bachelor of Arts in American Studies and Business from BYU and a Master of Public Affairs from the University of Missouri. He and his wife Jacquie are parents of four
children and they live in Saratoga Springs, Utah.</div>
<br>
I simplified your Javascript and added what was necessary to achieve what you defined as requirements. Check the snippet below. This is using vanilla Javascript only. To your images, I added a class="photo" since I assume there will also be other images on the page which should not get affected.
//An array that hold the IDs of images that we mentioned in their DIV blocks
var objId = ["image1","image2","image3","image4"];
var images = document.getElementsByClassName("photo");
function changeIt(objName) {
//The following loop does the display of a single image based on its ID. The image whose ID we passed into this function will be the
//only image that is displayed rest of the images will be hidden based on their IDs and that part has been handled by the else part
//of the if statement within this loop.
for (var i = 0; i < objId.length; i++) {
console.log(i+": "+objId[i]);
var tempObj = document.getElementById(objId[i]);
if (objName != objId[i]) {
tempObj.style.display = "none";
images[i].style.filter = "sepia(75%)";
}
else {
tempObj.style.display = "block";
images[i].style.filter = "sepia(0)";
}
}
return;
}
/* make the effect smoothly animated in browsers that support it */
img {
transition-duration: 0.4s;
}
<a name="isaac"></a>
<a id="one" href="#isaac" onclick="changeIt('image1');">
<img src="http://www.3cwaremarketing.com/VisiSite/wp-content/uploads/2015/05/Isaac1.jpg" border="0" alt="one" class="photo" />
</a>
<a name="alan"></a>
<a id="two" href="#alan" onclick="changeIt('image2');">
<img src="http://www.3cwaremarketing.com/VisiSite/wp-content/uploads/2015/05/ed.jpg" border="0" alt="two" class="photo" />
</a>
<a name="ed"></a>
<a id="three" href="#ed" onclick="changeIt('image3');">
<img src="http://www.3cwaremarketing.com/VisiSite/wp-content/uploads/2015/05/alan.jpg" border="0" alt="three" class="photo" />
</a>
<a name="matt"></a>
<a id="four" href="#matt" onclick="changeIt('image4');">
<img src="http://www.3cwaremarketing.com/VisiSite/wp-content/uploads/2015/05/matt.jpg" border="0" alt="four" class="photo" />
</a>
<br>
<br>
<div id="image1">
<h2>Isaac W. Jacobson</h2>
VP Business Development
<br>
<br>Mr. Jacobson brings a wealth of executive experience and professional relationships, having assembled top-tier executive teams and boards of directors for technology companies, syndicating venture capital, and buying and selling companies throughout
his career. He has held executive positions with media and technology entities such as theDial.com, Digonex Technologies, MusicRebellion, Digital Kiosk Technologies, Humanizing Technologies and eTAGZ Inc. In addition to building and growing technology
companies, Mr. Jacobson has had ownership interests across other sectors including precious metals, professional sports teams, and import/export companies working with the countries of Mexico, China, and the United Kingdom. A popular speaker and trusted
advisor to power brokers, he is often sought out by those in the highest ranks of business, politics, and entertainment to strategize on issues ranging from acquisitions, investments, and public policy to personal growth and bringing to market innovative
ideas. Mr. Jacobson is dedicated to his community, having established or served on numerous non-profit boards including the Snow College Foundation Board, the UVU Foundation Board, the Hispanic Chamber of Commerce, and the Family Defense PAC. He is
an avid donor and fundraiser for Republican political candidates and meaningful political initiatives to further Utah�s thriving business environment and family values. Mr. Jacobson is a father of three and he and his wife Tara reside in Mapleton, Utah.
</div>
<div id="image2" style="display:none">
<h2>Alan W. Bunker</h2>
CFO
<br>
<br>Mr. Bunker founded Spectrum Field Services with two other partners in 1987. A CPA and MBA, he has enjoyed an extensive career as a top executive in the public accounting, retail department store, real estate development, and health care industries.
He also has worked as an adjunct professor at the University of Utah. As a Senior Consultant with KPMG Peat Marwick in San Francisco, Mr. Bunker performed numerous consulting engagements in the savings and loan industry. He later became the Executive
Vice President and Chief Operating Officer of a real estate development firm, with major multi-family residential projects in Texas, Colorado, and Washington. Mr. Bunker has been heavily involved in the field service industry for over 20 years through
his participation with several industry-related associations. He periodically contributes articles to industry publications, and frequently has chaired committees and panels, including committees responsible for the development of field service standards
and procedures and technology advances for the industry. A long-time member of the Board of Governors of the National Association of Mortgage Field Services (NAMFS), Mr. Bunker is a past president of that organization.
</div>
<div id="image3" style="display:none">
<h2>Ed Bruno</h2>VP of Sales
<br>
<br>Mr. Bruno is an 18-year sales veteran with a performance record anchored on results. He has co-founded several start-ups, played a central role in three merger and acquisition events and lead sales teams of over 80 people to deliver on annual budgets
in excess of $400 million. His expertise crosses numerous business channels including media, technology, corporate communications, intellectual property, licensing, and webcast solutions. Mr. Bruno has held senior leadership roles including COO, CBO,
and VP of Sales in nine companies, two of them public. Mr. Bruno was voted into the �40 Under 40� by the Seattle Business Examiner. He holds Masters Degrees in English and Rhetorical Studies from Oregon State University</div>
<div id="image4" style="display:none">
<h2>A. Matthew Bunker</h2>VP Business Development
<br>
<br>Mr. Bunker is a natural-born networker and connector. He started his career as a staff member of the U.S. Senate Committee on the Judiciary in Washington, DC where he primarily focused on U.S. immigration policy but also assisted with judicial nominations
and crime legislation. Following his tenure with the Senate, Mr. Bunker continued to work with Congress with a government affairs and sports representation group. He also worked closely with the National Basketball Referees Association. Following his
career in Washington, DC, Mr. Bunker turned his attention to higher education, specifically building alumni associations. He was the Alumni Director for Salt Lake Community College, where he took their alumni activity from 32 active members to over
30,000 active members in under four years. Then he worked as the Alumni Manager with the MBA program at Brigham Young University. He organized its worldwide network of MBA alumni; focusing a great deal on social and new media, email marketing, and other
methods of connecting people together. Mr. Bunker speaks fluent Spanish. He holds a Bachelor of Arts in American Studies and Business from BYU and a Master of Public Affairs from the University of Missouri. He and his wife Jacquie are parents of four
children and they live in Saratoga Springs, Utah.</div>
<br>
You want to do the opposite. Instead of adding shade to other pictures, just lower their opacity.
Set all image to semi-transparent, and full opaque on hover.
On click, add an "active" class that will hold the opaque state.
$("img").click( function(){
$(this)
.addClass("active") // Adds "active" class to all images
.siblings() // Selects images other than the one that's been clicked
.removeClass("active"); // Removes the "active" class on these images
$(".text")
.hide() // Hides all texts
.eq( $(this).index() ) // select only the text corresponding to the clicked image's index
.show() // Shows only the corresponding text
})
#container{
background: #492E1D;
display: inline-block;
}
img{
opacity : 0.5;
-webkit-transition: opacity 0.4s ease-in-out;
transition: opacity 0.4s ease-in-out;
cursor: pointer;
}
img:hover, img.active{
opacity:1;
}
.text{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<img src="http://www.lorempixel.com/150/200/people"/>
<img src="http://www.lorempixel.com/150/200/people"/>
<img src="http://www.lorempixel.com/150/200/people"/>
<img src="http://www.lorempixel.com/150/200/people"/>
</div>
<p class="text">Text for image 1</p>
<p class="text">Text for image 2</p>
<p class="text">Text for image 3</p>
<p class="text">Text for image 4</p>