0

I am having a issue where I am able to supposed to change my css file using javascript to edit the "href" attribute. The problem that I am having is that I cannot differentiate when a button is pressed or not. I have 2 buttons one for StyleA and one for StyleB. I am not allowed to edit the html file at all, I am wondering what did I do wrong. Java Script

"use strict";

window.onload = function() {
    let elements = document.getElementsByTagName('button');

    document.getElementById('styleA').addEventListener('click', () => {
        document.getElementById('styleSheet').setAttribute('href', 'styleA.css');
    });
    document.getElementById('styleB').addEventListener('click', () => {
        document.getElementById('styleSheet').setAttribute('href', 'styleB.css');
    });
};

Html

<link id="styleSheet" href="styleA.css" rel="stylesheet" type="text/css">

<!-- ... -->

<form>
    <button id="styleA" type="submit">Use styleA</button>
    <button id="styleB" type="submit">Use styleB</button>
</form>

My approach is to use the "addEventListener" to know when a button is pressed and accurately change the css file.

Domanik Logan
  • 31
  • 5
  • 2
    What do you mean by "I cannot differentiate when a button is pressed or not"? – Dave Newton Feb 06 '23 at 20:46
  • 2
    At a glance, two potential issues I see here are... (1) `use strict` is going to result in `elements = ...` producing an error, since that variable was never declared. (2) Clicking either of these buttons is going to post the form and reload the page. Are either of those things happening in your testing/debugging? – David Feb 06 '23 at 20:48
  • the main issue is that the buttons are submit buttons and you probably reload the page on click. you probably need to call event.preventdefault() – YAMM Feb 06 '23 at 20:49
  • To clarify, I am just wanting to change my html when a button is pressed, but only when that specific button is pressed, I can't figure out a way to prevent both of the functions from executing. I did see a comment about preventing the default behavior from happening. Thank you for all of your feedback – Domanik Logan Feb 06 '23 at 20:58
  • The phrase `change my css file using javascript to edit the "href" attribute` doesn't make sense. You can't modify attributes with CSS. Please revise to be more clear. – isherwood Feb 06 '23 at 21:05
  • 1
    Why are you using a form? I see no logical reason for that here, and obviously it's causing problems. Also, what is `elements` for? – isherwood Feb 06 '23 at 21:06
  • Not allowed to change the html, and elements was being used for something but, I decided to not use it. – Domanik Logan Feb 06 '23 at 21:07
  • @DomanikLogan: *"I can't figure out a way to prevent both of the functions from executing"* - How specifically are you observing this behavior? I don't see how either of those buttons would invoke **both** of the event handlers. (Edit: Adding an event argument to the two `click` event listeners and calling `preventDefault()` on that argument fixes the problem.) – David Feb 06 '23 at 21:08
  • Its probably because of the window.onload function, I am a ok with not using it, however this code was mostly based off of the examples that my professor had given us. – Domanik Logan Feb 06 '23 at 21:11
  • 1
    @DomanikLogan It's not because of the `onload` function; all it does is run the JS you've provided, which adds the event listeners. But you are using `submit` buttons and submitting a form, but you actually don't want to reload the page. – Dave Newton Feb 06 '23 at 21:16
  • Try changing the `type` attribute of the buttons to `"button"` before adding the event listeners to them. This prevents them firing submit events that would need extra code to catch and cancel. – traktor Feb 06 '23 at 22:38

0 Answers0