CODEWITHSUNDEEP
javascripthtml
hiith
hiith

Reputation: 76

Can't set css property on a button using JavaScript

I'm trying to add a button to my website to change the number of columns displayed, because it's a dictionary and more columns would be more efficient with space, but perhaps more difficult to navigate. I'm just using straight HTML, PHP, CSS, and just this little bit of javascript, but when I click the button, nothing happens. I've tried what I can to fix it, but to no avail. Here's the script (with CSS)

#col {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
}
<center><button onclick="thrcol()">Three Columns</button></center>

<script type="text/javascript">
function thrcol() {
    document.getElementById("col").style.-webkit-column-count=3;
    document.getElementById("col").style.-moz-column-count=3;
    document.getElementById("col").style.column-count=3;
}
</script>


<div id="col"><!-- A bunch of boring PHP that works -->Hello, World!<br>Hello, World!<br>Hello, World!</div>

I thought that this would just be simple, but, as I said, nothing happens. What's wrong here?

Upvotes: 0

Views: 271

Answers (2)

Hazarapet Tunanyan
Hazarapet Tunanyan

Reputation: 2865

At first you must have document ready for setting event,then I think your css is not so correct.you can use this link.there are documentations and examples about html,css and javascript. http://www.w3docs.com/learn-javascript/javascript-events.html

Upvotes: -1

Al.G.
Al.G.

Reputation: 4387

Your code was almost right, the only wrong thing was setting the style property. There are 2 ways to set a property to an object:

object.property = 'value';
object['property'] = 'value';

The first way property can contain only alphanumeric symbols and underscores. The second way you can use (almost) every symbol.

It is working now as expected:

function thrcol() {
    document.getElementById("col").style.webkitColumnCount = 3;
    document.getElementById("col").style.mozColumnCount = 3;
    document.getElementById("col").style.columnCount = 3;
    // or:
    document.getElementById("col").style['-webkit-column-count'] = 3;
    document.getElementById("col").style['-moz-column-count'] = 3;
    document.getElementById("col").style['column-count'] = 3;
}
button { display: block; }
#col {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
}
<button onclick="thrcol()">Three Columns</button>
<div id="col">
  Hello, World!<br>Hello, World!<br>Hello, World!<br>Hello, World!<br>Hello, World!<br>Hello, World!<br>Hello, World!<br>Hello, World!<br>Hello, World!<br>Hello, World!<br>Hello, World!<br>Hello, World!<br>Hello, World!<br>Hello, World!<br>Hello, World!<br>Hello, World!<br>Hello, World!<br>Hello, World!<br>Hello, World!<br>Hello, World!<br>Hello, World!<br>Hello, World!<br>Hello, World!<br>Hello, World!
</div>

Another way to set such dash-containing css properties using javascript:

"margin-left" becomes "marginLeft"
"border-bottom" becomes "borderBottom"
"-webkit-column-count" becomes "webkitColumnCount"

Upvotes: 2

Related Questions