# Docs

{% hint style="info" %}
**THESE DOCS ARE NOT COMPLETE!**
{% endhint %}

### Methods

* [#get](#get "mention")
* [#edit](#edit "mention")
* [#addclass](#addclass "mention")
* [#removeclass](#removeclass "mention")
* [#setcss](#setcss "mention")
* [#on](#on "mention")
* [#hide](#hide "mention")
* [#show](#show "mention")
* [#loop](#loop "mention")

{% hint style="info" %}
The `elem` parameter is a parameter used by almost all of the quick.js methods, and takes either a querySelector ("#editMe", ".className", "p", etc) or an Element object ("`document.getElementById()`", "`document.getElementByClassName()`", "`_.get()`", etc)
{% endhint %}

### get()

Gets an element using a querySelector and returns an Element object.\
\
Usage: `_.get(elem)`

Example:

```markup
<p id="editme"></p>
<script>
    var elem = _.get("#editme")
    _.edit(elem, "hello there")
</script>
```

### edit()

Edits an element's innerHTML

Usage: `.edit(elem, text)`

Parameters:

> `text` accepts any string or number

Example:

<pre class="language-markup"><code class="lang-markup">&#x3C;p id="editme">&#x3C;/p>

<strong>&#x3C;script>
</strong>    var edit = _.get("#editme")
    _.edit(edit, "I was edited!") // -> &#x3C;p id="editme">I was edited!&#x3C;/p>
    
    _.edit("#editme", "I was edited again!") // -> &#x3C;p id="editme">I was edited again!&#x3C;/p>
&#x3C;/script>
</code></pre>

### addClass()

Add a class to an element.

Usage: `.addClass(elem, property, value)`

Parameters:

> `property` takes a CSS property
>
> `value` takes a value that works with `property`

Example:

```markup
<p id="#changeClass">My class will be changed!</p>

<script>
    _.addClass("#changeClass", "text") // <p id="changeClass" class="text">
</script>
```

### removeClass()

Removes a class from an element

Usage: `_.removeClass(elem, classname)`

Parameters:

> `classname` takes a name of an element class

Example:

```markup
<p id="editme" class="removeMe keepMeHere"></p>
<script>
    var elem = _.get("#editme")
    _.removeClass(elem, "removeMe") // -> <p id="editme" class="keepMeHere"></p>
</script>
```

### setCSS()

Removes a class from an element

Usage: `_.setCSS(elem, property, value)`

Parameters:

> `property` takes the name of a CSS class
>
> `value` takes a valid CSS value of `property`

Example:

```markup
<p id="editme">I will red!</p>
<script>
    var elem = _.get("#editme")
    _.setCSS(elem, "color", "red") // -> <p id="editme">I will be red!</p> (colored red)
    _.setCSS("#editme", "font-size", "25px") // -> <p id="editme">I will be red!</p> (colored red and 25px)
</script>
```

### on()

Add an event listener to an element

Usage: `_.on(elem, event, callback)`

Parameters:

> `event` takes any HTML event
>
> `callback` takes any callback function

Example:

```markup
<p id="clickme">Click me!</p>
<script>
    var elem = _.get("#clickme")
    _.on(elem, "click", function() {
        alert("I was clicked!");
    })
</script>
```

### hide()

Hide an element on the document.

Usage: `.hide(elem)`

Example:

```markup
<p id="hideme">I will be hidden!</p>

<script>
    _.hide("#hideme") // Element is now hidden
</script>
```

### show()

Show an element.

Usage: `.show(elem)`

Example:

```markup
<p id="showme">I will be shown!</p>

<script>
    _.hide("#showme") // Element is now hidden
    _.show("#showme") // Element is now shown
</script>
```

### loop()

Loop a function an amount of times

Usage: `.loop(times, function)`

Parameters:

> `times` takes an integer
>
> `function` takes any JavaScript function

Example:

```markup
<script>
    _.loop(5, function() {
        document.write("Hello!")
    }) // "Hello!" was written 5 times
</script>
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://quick.js.org/docs.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.