G.H G.H - 1 year ago 66
Javascript Question

Jquery getting the value of an element attribute and seeing if it equeals the value of a different attribute

What I am doing is making an mini game where users can drag and drop "magnets" (actually images) of words to create active writing sentences. In order to evaluate if the sentence is correct I made a data attribute "data-spot" in the drop area divs and I made a data attribute "data-word" on the images. If the word contained in "data-word" matches the the word contained in "data-spot" then it is a match. This evaluation occurs on button click "check my work". Right now I've made a function that should check if the magnets are matching for sentence one and if they are all match it should add 1 to the score.

My problem is that I'm getting "wordpuzzle.js:27 Uncaught ReferenceError: $this is not defined". I have checked and my links to jquery are at the bottom of my html and my javascript file is linked below the jquery files so that's not the problem. I think the issue is the logic I use to select the attribute values under the //on submit click in my jquery but I've checked and I have not made any typos...

<!doctype html>
<html lang="en">

<title>PR Active Writing</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link rel="stylesheet" href="css/wordpuzzle2.css">
<link href='https://fonts.googleapis.com/css?family=Yesteryear' rel='stylesheet' type='text/css'>

<image src="images/PR-Active-Writing-Whiteboard.png" alt="whiteboard picture" id="backgroundimage"/>
<div id="startmessage">
<h1>Welcome to the PR Active Writing Game</h1>
<div>For clear, concise and strong sentences, PR writers use the active voice.
When you click on the ‘begin’ button you will be shown a sentence that is
written in passive voice, your task is to rearrange the words to change the
sentence to active voice. There is a word bank to choose extra or different
words from. Simply drag the words into their correct spot and when you are
satisfied with your answer click the ‘Check my work’ button.
<button id="startactive">BEGIN</button>
<div id="wordbank">
<h1>Word Bank:</h1>
<image src="images/magnet-broken.png" alt="broken" data-word="broken" class="magnet"/>
<image src="images/magnet-city.png" alt="city" data-word="city" class="magnet"/>
<image src="images/magnet-did.png" alt="did" data-word="did" class="magnet"/>
<image src="images/magnet-distroyed.png" alt="destroyed" data-word="destroyed" class="magnet"/> <!--typo in the word "destroyed"-->
<image src="images/magnet-fixed.png" alt="fixed" data-word="fixed" class="magnet"/>
<image src="images/magnet-for.png" alt="for" data-word="for" class="magnet"/>
<image src="images/magnet-give.png" alt="give" data-word="give" class="magnet"/>
<image src="images/magnet-half.png" alt="half" data-word="half" class="magnet"/>
<image src="images/magnet-house.png" alt="house" data-word="house" class="magnet"/>
<image src="images/magnet-instructions.png" alt="instructions" data-word="instructions" class="magnet"/>
<image src="images/magnet-Mike.png" alt="Mike" data-word="Mike" class="magnet"/>
<image src="images/magnet-of.png" alt="of" data-word="of" class="magnet"/>
<image src="images/magnet-over.png" alt="over" data-word="over" class="magnet"/>
<image src="images/magnet-professor.png" alt="professor" data-word="professor" class="magnet"/>
<image src="images/magnet-profit.png" alt="profit" data-word="profit" class="magnet"/>
<image src="images/magnet-projects.png" alt="projects" data-word="projects" class="magnet"/>
<image src="images/magnet-Sam.png" alt="Sam" data-word="Sam" class="magnet"/>
<image src="images/magnet-sells.png" alt="sells" data-word="sells" class="magnet"/>
<image src="images/magnet-students.png" alt="students" data-word="students" class="magnet"/>
<image src="images/magnet-the.png" alt="the" data-word="the" class="magnet"/>
<image src="images/magnet-the2.png" alt="the" data-word="the" class="magnet"/>
<image src="images/magnet-the3.png" alt="the" data-word="the" class="magnet"/>
<image src="images/magnet-The4.png" alt="The" data-word="The" class="magnet"/>
<image src="images/magnet-The5.png" alt="The" data-word="The" class="magnet"/>
<image src="images/magnet-their.png" alt="their" data-word="their" class="magnet"/>
<image src="images/magnet-thesis.png" alt="thesis" data-word="thesis" class="magnet"/>
<image src="images/magnet-watch.png" alt="watch" data-word="watch" class="magnet"/>
<image src="images/magnet-well.png" alt="well" data-word="well" class="magnet"/>
<image src="images/magnet-wildfire.png" alt="wildfire" data-word="wildfire" class="magnet"/>
<image src="images/magnet-will.png" alt="will" data-word="will" class="magnet"/>
<image src="images/magnet-you.png" alt="you" data-word="you" class="magnet"/>
<image src="images/magnet-your.png" alt="your" data-word="your" class="magnet"/>

<div id="sentences">
<p>The thesis projects were done well by the students.</p>
<div id="senone"><div class="mdroppable" data-spot="The"> </div> <div class="mdroppable" data-spot="students"> </div> <div class="mdroppable" data-spot="did"> </div> <div class="mdroppable" data-spot="their"> </div> <div class="mdroppable" data-spot="thesis"> </div> <div class="mdroppable" data-spot="projects"> </div> <div class="mdroppable" data-spot="well"> </div></div>
<p>More than half of the city was destroyed by the wildfire.</p>
<div id="sentwo"><div class="mdroppable" data-spot="The"> </div> <div class="mdroppable" data-spot="wildfire"> </div> <div class="mdroppable" data-spot="destroyed"> </div> <div class="mdroppable" data-spot="over"> </div> <div class="mdroppable" data-spot="half"> </div> <div class="mdroppable" data-spot="of"> </div> <div class="mdroppable" data-spot="the"></div><div class="mdroppable" data-spot="city"></div></div>
<p id="senthree">Instructions will be given to you by your professor.</p>
<p id="senfour">The broken watch was fixed by Mike.</p>
<p id="senfive">The house was sold for a profit by Sam.</p>
<button id="checkmywork">CHECK MY WORK</button>

<div id="successmessage">
<p id="success1">Excellent job! You got 4-5 answers correct! Here are the correct sentences.</p>
<p id="success2">Not bad! You got 2-3 answers correct! Here are the correct sentences.</p>
<p id="success3">You might want to brush up on your active writing before considering Public relations. You got 0-1 answers correct. Here are the correct sentences.</p>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/wordpuzzle.js"></script>

this is my jquery:

var pruserScore = 0;


//makes the magnets draggable
$( dragmagnet );
function dragmagnet() {
snap: ".mdroppable",
cursor: 'move'

//makes underline areas droppable

//on submit click
if ($("#senone .mdroppable").attr('data-spot',$(this).val()) === $(".magnet").attr("data-word",$this.val())){
pruserScore += 1;
else{console.log("it's wrong");}

Answer Source

It appears that you forgot to wrap this in parens. This will correct the error:

if ($("#senone .mdroppable").attr('data-spot',$(this).val()) === $(".magnet").attr("data-word",$this.val())){
                                                   // need to change this ------------------------^

But more importantly, .attr(key, value) is a setter invocation, not a getter as you may be looking for. You probably don't need the $(this).val() at all.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download