CODEWITHSUNDEEP
javascriptjqueryhtml
jeepers mcface
jeepers mcface

Reputation: 419

Javascript and HTML don't seem to be working correctly

I'm trying to create a webpage where the words you hover over disappear and never appear again after you leave them, with the exception of a few words. I got most of this code from another StackOverflow person, but I'm having trouble getting the Javascript to actually function work with the HTML.

The alert in the JS is just there to check if the javascript is working properly. Maybe I wrapped it in the document.ready incorrectly?

I'm sorry if I'm being an absolute dolt. I'm not a coder, I'm just trying to do an "electronic text" project for an english class. Any help would be appreciated. Thank you. Here's my code:

HTML:

<!DOCTYPE html>
<head>
<link rel = "stylesheet" href = "NarrativeTheory.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type = "text/javascript" src="NarrativeTheory.js"></script>
<h1>
Narrative Theory Project
</h1>
</head>

<body>
hover around in the area below...
<br>
<br>

<p class = "hover">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra risus nec maximus rutrum. Vestibulum vulputate, elit ac euismod gravida, felis erat eleifend felis, vel blandit lorem ex sit amet est. Cras luctus bibendum dolor, vel consequat magna.
    Morbi pellentesque turpis metus. Pellentesque sit amet erat ex. Integer et nisi nisl. Quisque ornare mollis velit, id elementum elit pharetra at. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur
    cursus cursus dolor, eu laoreet mauris dapibus vitae. Nunc ac ipsum sit amet diam suscipit lobortis. Nam nec vehicula augue. Cras nec sapien vitae leo gravida vestibulum.
</p>
<p class = "hover">
    Etiam viverra bibendum aliquet. Aenean erat ligula, commodo id aliquet vel, eleifend ac orci. Aliquam blandit libero feugiat augue tincidunt, id fringilla lectus aliquam. Nulla ut nisl sit amet nulla feugiat porta. Curabitur euismod, mi vitae luctus facilisis,
    est risus ornare erat, sed efficitur justo lorem nec urna. Cras in fringilla dolor. Aliquam faucibus scelerisque nunc, et rutrum quam pharetra ac. Vestibulum velit enim, consequat id nisi in, laoreet feugiat turpis. Phasellus auctor pharetra ultrices.
    In ut condimentum lectus. Integer at dui egestas, ultrices metus pulvinar, venenatis mi. Donec vitae mauris viverra, convallis urna sit amet, posuere sapien. Sed quis magna odio. Vivamus mauris ipsum, euismod non sagittis eu, pretium et neque. Nunc
    consequat ipsum eget magna facilisis mattis. Nulla eu lorem id tortor faucibus placerat.
</p>

</body>
</html>

CSS:

* {

}

.hover {
    opacity: 0.01;
}

.hovering {
    opacity: 1;
}

span {
    transition: opacity 0.5s;
    opacity: 0;
}

p {
    cursor: default;
}

Javascript:

$document.ready(function() {

alert("Help!");

var exceptions = ["lorem", "ipsum", "consectetur", "pharetra"];

$("p").each(function() {           //for all paragraphs

    var txt = $(this).text()       //get text, split it up, add spans where necessary, put it back together
        .split(" ");
        .map(function(x) { return exceptions.includes(x.toLowerCase()) ? x : "<span class='hover'>" + x + "</span>"});
        .join(" ");
    $(this).html(txt);             //set the text to our newly manipulated text

}).on("mouseover", ".hover", function() {

    $(this).addClass("hovering");  //set opacity to 100%

}).on("mouseout", ".hovering", function() {

    $(this).attr("class", "");     //set opacity to 0%, remove "hover" events

});
});

Upvotes: 0

Views: 74

Answers (3)

cнŝdk
cнŝdk

Reputation: 32145

Well you have several problems with your actual code:

  1. First of all it's $(document) and not $document.

  2. Then in your code you are trying to chain some methods in a new line foe example when you write .split(" ");, methods can only be called on objects or arrays in javascript, so you need to change your code like this:

$("p").each(function() {
  var txt = $(this).text()
    .split(" ")
    .map(function(x) {
      return exceptions.includes(x.toLowerCase()) ? x : "<span class='hover'>" + x + "</span>"
    }).join(" ");
  $(this).html(txt);
});

Note:

  • Note that you can't call .join() or any other method (except functions declared in the window scope) after using a semicolon ; in the previous line, because ; means that a statement is ended so in the next line you need to call all methods on an object or an array.
  • Note also that you can check what errors you got in the browser console, so you can investigate your code and find out what's wrong with it.

Some Useful links:

I suggest you can read MDN - Introducing JavaScript objects and The Javascript Guide to Objects, Functions, Scope, Prototypes and Closures tutorial for further reading about this subject.

Upvotes: 3

spencer.sm
spencer.sm

Reputation: 20526

You are missing some parentheses. Change your first line to be:

$(document).ready(function() {

Also, if you are going to be chaining function calls, you can't end the lines using a semicolon. Semicolons should be removed from the lines that start .split and .map.

Upvotes: 1

engineforce
engineforce

Reputation: 3020

You should pay attention to the browser console, it will show you the JavaScript error.

Try following:

$(document).ready(...

Upvotes: 0

Related Questions