JavaScript2: Help

[bman8932]

I can't figure out why this JavaScript highlights the entire text. I only want to highlight the persName elements…

https://github.com/bman8932/Ben--Digital-Humanities/blob/master/McCoyJavaScript2_HTML

https://github.com/bman8932/Ben--Digital-Humanities/blob/master/McCoyJavaScript2_JS

Any help would be great. Thanks.

[ebeshero]

@bman8932 I'm taking a look now...

[ebeshero]

@bman8932 I think the problem is here in your JavaScript:

document.body.style.color = "red"

You declared a persName variable in the line above this, but you aren't calling that variable in this line. Instead, you're instructing the JavaScript to change the body of the HTML document.

[bman8932]

I tried document.persName and that didn’t work either

Sent from my iPhone

On Dec 1, 2018, at 17:53, Elisa Beshero-Bondar notifications@github.com<mailto:notifications@github.com> wrote:

@bman8932https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fbman8932&data=02%7C01%7Cbmm136%40pitt.edu%7C19c32bbb7acc47d6117408d657dfbe89%7C9ef9f489e0a04eeb87cc3a526112fd0d%7C1%7C0%7C636793015816268662&sdata=zXrvATxJDn1gbNUYlInS8EDt0dtfBesm0lAA7HKqzas%3D&reserved=0 I think the problem is here in your JavaScript:

document.body.style.color = "red"

You declared a persName variable in the line above this, but you aren't calling that variable in this line. Instead, you're instructing the JavaScript to change the body of the HTML document.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Febeshero%2FDHClass-Hub%2Fissues%2F583%23issuecomment-443465065&data=02%7C01%7Cbmm136%40pitt.edu%7C19c32bbb7acc47d6117408d657dfbe89%7C9ef9f489e0a04eeb87cc3a526112fd0d%7C1%7C0%7C636793015816278667&sdata=dIgMiZ85NuHwnOvDmXVyiBuQ%2BVLmtlPZmpaeXslPczQ%3D&reserved=0, or mute the threadhttps://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAo1COMUfYG7CNABw5020Q3NLg0_jk3_Lks5u0whLgaJpZM4Y9Idk&data=02%7C01%7Cbmm136%40pitt.edu%7C19c32bbb7acc47d6117408d657dfbe89%7C9ef9f489e0a04eeb87cc3a526112fd0d%7C1%7C0%7C636793015816278667&sdata=YSUoEaMuJAx5Y9sB9v1EZK7O1jChL0HtxpTwlOD9EUo%3D&reserved=0.

[ebeshero]

@bman8932 Sorry! Let me take a closer look at your code and see what's going on ...

[ebeshero]

@bman8932 Aha! I see what's wrong, and I've fixed it. There are a couple of issues here. 1) You're triggering the event locally inside the page. That's not exactly wrong by itself, but the syntax for calling a function is different when you're writing it in HTML vs. in a separate JavaScript file. I can't remember (= I'd need to look up) how to write that--there's a way, but this isn't working.

2) I added a few lines to your JavaScript file, so that a) when the DOM window initialitizes it triggers an init() function: window.onload = init and b) Then, the init() function adds an event listener to your button (which is what you were trying to do inside the HTML). The event listener listens for someone to click on the <button> element:

window.onload = init
function init() {
    var button = document.getElementsByTagName('button'); 
    button[0].addEventListener('click', changeColor, false);

}

3) The next thing is to repair your function a little. Here's the issue: You have several <span class="persName> elements, so to interact with them JavaScript needs to loop through them one-by-one with its for-each syntax. Remember that from class? Here's how it looks:

    function changeColor() {
    var persName = document.getElementsByClassName('persName');
    for  (var i = 0; i < persName.length; i++)
        persName[i].style.color = "red";
    }

What's going on here? That line with the for in it is setting up a little "range variable" named i (no dollar-signs to signal variables in JavaScript). It is set to hold a position value for each element designated persName (or with the class persName). Remember you have to signal the position value of an element EVERY time you call it in JavaScript. So even when there is just one button, you have to say, button[0] (since JavaScript counts starting from zero). When you want all the elements in series to respond, you need that JavaScript "for loop" set up.

If you want, I can push my files, but I bet you can repair it by reading this. I'd remove your function call from the HTML button and handle it entirely within the separate JavaScript file.

[bman8932]

Thanks!

Sent from my iPhone

On Dec 1, 2018, at 18:33, Elisa Beshero-Bondar notifications@github.com<mailto:notifications@github.com> wrote:

@bman8932https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fbman8932&data=02%7C01%7Cbmm136%40pitt.edu%7C748210d2ae184f037c6a08d657e56ba3%7C9ef9f489e0a04eeb87cc3a526112fd0d%7C1%7C0%7C636793040207566153&sdata=RdVYZYHNeIG30Z%2B%2Fi1hRUzrf8QBRFmMbJYPHs01rUqc%3D&reserved=0 Aha! I see what's wrong, and I've fixed it. There are a couple of issues here.

1. You're triggering the event locally inside the page. That's not exactly wrong by itself, but the syntax for calling a function is different when you're writing it in HTML vs. in a separate JavaScript file. I can't remember (= I'd need to look up) how to write that--there's a way, but this isn't working.

2. I added a few lines to your JavaScript file, so that a) when the DOM window initialitizes it triggers an init() function: window.onload = init and b) Then, the init() function then adds an event listener to your button (which is what you were trying to do inside the HTML). The event listener listens for someone to click on the element:

window.onload = init function init() { var button = document.getElementsByTagName('button'); button[0].addEventListener('click', changeColor, false);

}

1. The next thing is to repair your function a little. Here's the issue: You have several <span class="persName> elements, so to interact with them JavaScript needs to loop through them one-by-one with its for-each syntax. Remember that from class? Here's how it looks:

   function changeColor() { var persName = document.getElementsByClassName('persName'); for (var i = 0; i < persName.length; i++) persName[i].style.color = "red"; }

What's going on here? That line with the for in it is setting up a little "range variable" named i (no dollar-signs to signal variables in JavaScript). It is set to hold a position value for each element designated persName (or with the class persName). Remember you have to signal the position value of an element EVERY time you call it in JavaScript. So even when there is just one button, you have to say, button[0] (since JavaScript counts starting from zero). When you want all the elements in series to respond, you need that JavaScript for loop set up.

If you want, I can push my files, but I bet you can repair it by reading this. I'd remove your function call from the HTML button and handle it entirely within the file.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Febeshero%2FDHClass-Hub%2Fissues%2F583%23issuecomment-443467573&data=02%7C01%7Cbmm136%40pitt.edu%7C748210d2ae184f037c6a08d657e56ba3%7C9ef9f489e0a04eeb87cc3a526112fd0d%7C1%7C0%7C636793040207566153&sdata=sfx5QjULmwSF9MokDT8j%2FnVykyLFzJrSUtxghHvQQho%3D&reserved=0, or mute the threadhttps://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAo1CODQEGx2RRMmsZLFDDmRf0AaS1Tt1ks5u0xHRgaJpZM4Y9Idk&data=02%7C01%7Cbmm136%40pitt.edu%7C748210d2ae184f037c6a08d657e56ba3%7C9ef9f489e0a04eeb87cc3a526112fd0d%7C1%7C0%7C636793040207576162&sdata=MVPsyPfiZKRhMSCP%2BuJIzQHv4IvWAMZT420d6v5i6xQ%3D&reserved=0.