I'm trying to dynamically create an image which I will then append to the DOM.
import org.w3c.dom.HTMLImageElement
fun main(args: Array<String>) {
// load footer banner image
val img: HTMLImageElement = HTMLImageElement()
with (img){
src = "img/footer.png"
classList.add("img-responsive")
}
}
However, it doesn't like my constructor HTMLImageElement() since HTMLImageElement is an interface.
Removing the constructor and Kotlin complains that img must be initialised.
What is the correct way to make use of the HTMLImageElement in a type-safe way ?
Update: I'm now using maven which generates everything as it should.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.blah</groupId>
<artifactId>blah</artifactId>
<packaging>jar</packaging>
<version>1.0.0</version>
<name>Blah</name>
<properties>
<kotlin.version>1.0.2</kotlin.version>
<kotlin.html.version>0.5.8</kotlin.html.version>
</properties>
<repositories>
<repository>
<id>bintray-kotlinx</id>
<name>bintray</name>
<url>http://dl.bintray.com/kotlinx/kotlinx</url>
</repository>
</repositories>
<dependencies>
<dependency>
<groupId>org.jetbrains.kotlinx</groupId>
<artifactId>kotlinx.html.js</artifactId>
<version>${kotlin.html.version}</version>
</dependency>
</dependencies>
</project>
which compiles a blah.js, blah.js.map, blah.js.meta, kotlin.js, kotlinx.html.js, kotlinx.html.meta.js, kotlinx.html.shared.js, kotlinx.html.shared.meta.js and stdlib.meta.js.
In my html file (which is sitting in my root directory) I'm including the following:
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="target/classes/kotlin.js"></script>
<script type="text/javascript" src="target/classes/kotlinx.html.shared.js"></script>
<script type="text/javascript" src="target/classes/blah.js"></script>
I've got a println("hello world") in my Main.kt which executes fine in the browser printing "hello world" in the browswer console.
Now I still want to append that image dynamically using Kotlin ...
The docs say I should be doing document.create.div("panel") to create a div, but document.create... autocompletes to createAttribute, createComment etc, no create() method in sight anywhere. (document is from package 'kotlin.browser').
I'm not exactly sure how to use kotlinx.html since what I'm seeing in IntelliJ doesn't match the docs.
How do I append a dynamically created image to an existing div using KotlinJS ?
pom.xmlnow and added it into my post including all the dependencies, repositories, etc.System.outwill not work in kotlinjs.