Python Transcrypt addEventListener_Python_Addeventlistener_Transcrypt

Python Transcrypt addEventListener

python

Python Transcrypt addEventListener,python,addeventlistener,transcrypt,Python,Addeventlistener,Transcrypt,我已经编写了一个Python程序，用于将Transcrypt转换为Javascript。我无法使addEventListener函数工作。有什么想法吗以下是代码dom7.py： class TestSystem: def __init__ (self): self.text = 'Hello, DOM!' self.para = 'A new paragraph' self.textblock = 'This is an expandable text block.

我已经编写了一个Python程序，用于将Transcrypt转换为Javascript。我无法使addEventListener函数工作。有什么想法吗

以下是代码dom7.py：

class TestSystem:

def __init__ (self):
    self.text = 'Hello, DOM!'
    self.para = 'A new paragraph'
    self.textblock = 'This is an expandable text block.'
    self.button1 = document.getElementById("button1")
    self.button1.addEventListener('mousedown', self.pressed)

def insert(self):,
    document.querySelector('output').innerText = self.text
    # document.querySelector('test').innerText = "Test"+self.button1+":"

def pressed(self):
    container = document.getElementById('textblock')
    newElm = document.createElement('p')
    newElm.innerText = self.para
    container.appendChild(newElm)

testSystem = TestSystem()

下面是相应的dom7.html：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="__javascript__/dom7.js"></script>
<title>Titel</title>
</head>
<body onload=dom7.testSystem.insert()>
<button id="button1">Click me</button><br>
<main>
    <h1>DOM examples</h1>
    <p>Testing DOM</p>
    <p>
        <output></output>
    </p>
  <p>
    <test>Test String:</test>
  </p>

  <div id="textblock">
    <p>This is an expandable text block.</p>
  </div>
</main>
</body>
</html>


滴度
单击我

DOM示例
测试DOM



测试字符串：

这是一个可扩展的文本块

问题是在DOM树准备就绪之前调用了

TestSystem

构造函数。有三种方法可以解决这个问题，最后一种是最好的

第一种方法是在填充身体后包含脚本：

class TestSystem:

    def __init__ (self):
        self.text = 'Hello, DOM!'
        self.para = 'A new paragraph'
        self.textblock = 'This is an expandable text block.'
        self.button1 = document.getElementById("button1")
        self.button1.addEventListener('mousedown', self.pressed)

    def insert(self):
        document.querySelector('output').innerText = self.text
        # document.querySelector('test').innerText = "Test"+self.button1+":"

    def pressed(self):
        container = document.getElementById('textblock')
        newElm = document.createElement('p')
        newElm.innerText = self.para
        container.appendChild(newElm)

testSystem = TestSystem()

以及：


滴度
单击我

DOM示例

测试DOM




测试字符串：

这是一个可扩展的文本块

我在教程部分查看了您的mondrian示例，发现还有一种非常简单的方法可以在加载文档后将addEventListener附加到文档。您可以使用html文档标题中的DOMContentLoaded属性来执行此操作：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <script src="__javascript__/addEventListener_example1.js"></script>
        <script>document.addEventListener("DOMContentLoaded", addEventListener_example1.init)</script>
        <title>Titel</title>
    </head>
    <body>
        <button id="button1">Click me</button><br>
        <main>
            <h1>DOM examples</h1> 
            <p>
                Testing DOM
            </p>           
            <p>
                <output></output>
            </p>           
            <p>
                <test>Test String:</test>
            </p>
            <div id="textblock">
                <p>This is an expandable text block.</p>
            </div>
        </main>
    </body>
</html>

非常感谢你。这帮了大忙。为了我自己对Transcrypt的研究，我将几个示例上传到github，以便通过Transcrypt介绍Python和Javascript。如果您觉得这些文件对初学者教程有用，可以使用它们。如果我有时间，我会尝试完成更多的：这可能会非常有用！他们准备好后会好好看看的。

class TestSystem:

    def __init__ (self):
        self.text = 'Hello, DOM!'
        self.para = 'A new paragraph'
        self.textblock = 'This is an expandable text block.'
        self.button1 = document.getElementById("button1")
        self.button1.addEventListener('mousedown', self.pressed)

    def insert(self):
        document.querySelector('output').innerText = self.text
        # document.querySelector('test').innerText = "Test"+self.button1+":"

    def pressed(self):
        container = document.getElementById('textblock')
        newElm = document.createElement('p')
        newElm.innerText = self.para
        container.appendChild(newElm)

def init ():
    testSystem = TestSystem()

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <script src="__javascript__/dom7.js"></script>

        <title>Titel</title>
    </head>
    <body onload=dom7.testSystem.insert()>
        <button id="button1">Click me</button><br>
        <main>
            <h1>DOM examples</h1> 
            <p>
                Testing DOM
            </p>           
            <p>
                <output></output>
            </p>           
            <p>
                <test>Test String:</test>
            </p>
            <div id="textblock">
                <p>This is an expandable text block.</p>
            </div>
            <script>dom7.init ();</script>
        </main>
    </body>
</html>

class TestSystem:

    def __init__ (self):
        self.text = 'Hello, DOM!'
        self.para = 'A new paragraph'
        self.textblock = 'This is an expandable text block.'
        self.button1 = document.getElementById("button1")
        self.button1.addEventListener('mousedown', self.pressed)

    def insert(self):
        document.querySelector('output').innerHTML = self.text
        # document.querySelector('test').innerText = "Test"+self.button1+":"

    def pressed(self):
        container = document.getElementById('textblock')
        newElm = document.createElement('p')
        newElm.innerText = self.para
        container.appendChild(newElm)

def init ():
    testSystem = TestSystem()
    testSystem.insert ()

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <script src="__javascript__/dom7.js"></script>

        <title>Titel</title>
    </head>
    <body onload="dom7.init ();">
        <button id="button1">Click me</button><br>
        <main>
            <h1>DOM examples</h1> 
            <p>
                Testing DOM
            </p>           
            <p>
                <output></output>
            </p>           
            <p>
                <test>Test String:</test>
            </p>
            <div id="textblock">
                <p>This is an expandable text block.</p>
            </div>
        </main>
    </body>
</html>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <script src="__javascript__/addEventListener_example1.js"></script>
        <script>document.addEventListener("DOMContentLoaded", addEventListener_example1.init)</script>
        <title>Titel</title>
    </head>
    <body>
        <button id="button1">Click me</button><br>
        <main>
            <h1>DOM examples</h1> 
            <p>
                Testing DOM
            </p>           
            <p>
                <output></output>
            </p>           
            <p>
                <test>Test String:</test>
            </p>
            <div id="textblock">
                <p>This is an expandable text block.</p>
            </div>
        </main>
    </body>
</html>

#!/usr/bin/env python
# -*- coding: utf-8 -*-

def init():
    insert()

def insert():
    document.querySelector('output').innerHTML = 'Hello, DOM!'
    button1 = document.getElementById("button1")
    button1.addEventListener('mousedown', pressed)

def pressed():
    para = 'A new paragraph'
    container = document.getElementById('textblock')
    newElm = document.createElement('p')
    newElm.innerText = para
    container.appendChild(newElm)