How to edit a style of a div from a button with if?

Question

I want the green ones to change to blue and green , and the Hi to change to Hello. Can somebody tell me in an easy html way how to edit the style and the written things with a button.

function functionl {
  alert('success')
}

.L1 {
  padding: 0px;
  border: 1px;
  border-radius: 200% 0px 200% 0px;
  border-color: green;
  background-color: green;
  font-size: 50px;
  color: white;
  width: 50%;
  height: 47%;
}

.L2 {
  padding: 0px;
  border: 1px;
  border-radius: 0px 200% 0px 200%;
  border-color: green;
  background-color: green;
  font-size: 50px;
  color: white;
  width: 50%;
  height: 47%;
}

.button1 {
  height=5%;
  font-size: 35;
  background-color: Red;
  color: blue;
  border-radius: 30px 30px 30px 30px;
}

<button class="L2">Hi</button><button class="L1">Hi</button><br>
<button class="L1">Hi</button><button class="L2">Hi</button>
<center><button class="button1" onclick="functionl()">Click me</button></center>

I want somebody to show me how to edit my code and how to edit any style from a button

Better duplicate: [How to change an element's class with JavaScript?](https://stackoverflow.com/q/195951/5223757) — wizzwizz4, Feb 17 '19 at 18:40
I'm aware of js but the problem is that it doesn't seem to work: I tried "document.getElementById('L1').style[background-color]=red" and it still doesn't want to work I even tried attaching it to a function — Omar ElBayaa, Feb 17 '19 at 18:44
Your answers are in the second link I posted. You made a typo in your JavaScript, as the error says; after the `function1` there should be a `(` (and after that there should be a `)`). — wizzwizz4, Feb 17 '19 at 18:46
can you write the way document.getElement.... should be written? — Omar ElBayaa, Feb 17 '19 at 18:48
The function worked but this still doesn't --> "document.getElementById('L1').style[background-color]=red" — Omar ElBayaa, Feb 17 '19 at 18:50
You need to write `backgroundColor`, because JavaScript doesn't like `-`s. `style.backgroundColor`. — wizzwizz4, Feb 17 '19 at 18:51
Do you mean like this --> "document.getElementById('L1').style[backgroundcolor]=red" — Omar ElBayaa, Feb 17 '19 at 18:54

score 0 · Accepted Answer · edited Feb 17 '19 at 19:04

0

I believe this is what you are looking for:

function functionl() {
  for (let e of document.querySelectorAll('.L1, .L2')) {
    if (e.innerText == 'Hi') {
      e.style.backgroundColor = 'blue';
      e.innerText = 'Hello';
    } else {
      e.style.backgroundColor = 'green';
      e.innerText = 'Hi';
    }
  }
}

.L1 {
  padding: 0px;
  border: 1px;
  border-radius: 200% 0px 200% 0px;
  border-color: green;
  background-color: green;
  font-size: 50px;
  color: white;
  width: 50%;
  height: 47%;
}

.L2 {
  padding: 0px;
  border: 1px;
  border-radius: 0px 200% 0px 200%;
  border-color: blue;
  background-color: blue;
  font-size: 50px;
  color: white;
  width: 50%;
  height: 47%;
}

.button1 {
  height=5%;
  font-size: 35;
  background-color: Red;
  color: blue;
  border-radius: 30px 30px 30px 30px;
}

<body>
  <button class="L2">Hello</button><button class="L1">Hi</button><br>
  <button class="L1">Hi</button><button class="L2">Hello</button>
  <center><button class="button1" onclick="functionl()">Click me</button></center>
</body>

edited Feb 17 '19 at 19:04

wizzwizz4

6,140
2
26
62

answered Feb 17 '19 at 18:48

Miroslav Glamuzina

4,472
2
19
33

I'm just going to tidy up your code a bit, if that's OK. It's very inefficient at the moment. – wizzwizz4 Feb 17 '19 at 18:50
Go for it, I didn't have my coffee yet ;p – Miroslav Glamuzina Feb 17 '19 at 18:52
@wizzwizz4 Thank you. – Omar ElBayaa Feb 17 '19 at 18:55
@Miroslav Thank you – Omar ElBayaa Feb 17 '19 at 19:00
@Miroslav That OK? Still doesn't support IE11, but I don't think that's much of an issue. – wizzwizz4 Feb 17 '19 at 19:04
1

@wizzwizz4 Yes, that's okay. IE11 doesn't even want to support IE11 so no harm no foul :) – Miroslav Glamuzina Feb 17 '19 at 19:10
@Miroslav That's true. The ES6-only features of its New New New `about:tabs` page are amusing. – wizzwizz4 Feb 17 '19 at 19:21

How to edit a style of a div from a button with if?

1 Answers1