LMSouq
moodle-core Open

How to Include Javascript Code while writing a Moodle Block Plugin?

BR
BraveEvidence
1 month ago
3 views
Problem Description
I am trying to create a moodle block plugin, [here][1] is the source code, it is a very simple plugin with bar minimum code, [1]: https://github.com/BraveEvidence/MoodleBlockNotWorking I wrote some `html` and when a user enter something in the text input I want to take that content in `javascript` and display it in some other div now when I create a zip of it and install it in moodle, I am able to see the plugin and add it as a block but the problem is the `javascript` code does not work when I enter something in the text input of my `html` code I tried looking into the console as well but I see no error. I was asking ChatGPT and it told me to use grunt but I have no prior experience with Grunt so I wrote the `javascript` file in build folder as main.min.js can someone help me understand what exactly is the issue with the `javascript` code So I created amd/build/main.min.js define([], function () { return { init: function () { document.addEventListener("DOMContentLoaded", function () { const input = document.getElementById("block_helloworld_input"); const button = document.getElementById("block_helloworld_submit"); const result = document.getElementById("block_helloworld_output"); if (input && button && result) { button.addEventListener("click", function () { const value = input.value.trim(); alert(`You entered: ${value}`); result.textContent = `You typed: ${value}`; }); } }); }, }; }); In the root of my plugin I created `block_helloworld.php` <?php class block_helloworld extends block_base { public function init() { $this->title = get_string('pluginname', 'block_helloworld'); } public function get_content() { global $PAGE; if ($this->content !== null) { return $this->content; } $this->content = new stdClass(); // Load our JavaScript module $PAGE->requires->js_call_amd('block_helloworld/main', 'init'); // Create the form HTML $this->content->text = ' <h4>Hello World, this is coding with nobody</h4> <div class="block-helloworld-container"> <input type="text" id="block_helloworld_input" class="form-control" placeholder="Enter text here"> <button id="block_helloworld_submit" class="btn btn-primary">Process</button> <div id="block_helloworld_outp...

AI-Generated Solution

Powered by LMSouq AI · GPT-4.1-mini

✓ Solution Ready
Analyzing problem and generating solution…
Was this solution helpful?
Back to Knowledge Base