I noticed that if I define a JavaScript function in the JS panel and include the function in an onclick attribute in the HTML mark-up, the function is not recognized. But if I define the same function using opening and closing script tags in the HTML panel like so:
<script>
function myfunction(){
alert("chow");
}
</script>
<button id = "mybutton" onclick = "myfunction()">Click me</button>
the function is recognized.
Example where function is defined in HTML panel
Example where function is defined in JavaScript panel
You just have to configure jsFiddle to not wrap the JS code in the load or ready event handler (which it does by default):
Otherwise the function will be local to those event handlers, not global. To make event handlers defined HTML work, you have to define the function in global scope.
More information can be found in the documentation.
Related
I am writing my first app in Vue3 and I use composition-api with script setup.
Using v-for, I create components that are inputs (CrosswordTile) that make up the crossword grid.
A problem appeared during the implementation of the field containing a clue to the password.
Since the text doesn't allow text to wrap, I wanted to dynamically change the tag to after a click.
Function in parent component where I handle logic after click that change tile type works fine, but I need to change tag of "target" to and set maxLength to a different value.
If it would help here is whole code on github: https://github.com/shadowas-py/lang-cross/tree/question-tile, inside CrosswordGrid.vue.
function handleTileTypeChange(target: HTMLInputElement) {
if (target && !target.classList.contains('question-field')) {
addStyle(target, ['question-field']);
iterateCrosswordTiles(getNextTile.value(target), removeStyle, ['selected-to-word-search', 'direction-marking-tile']);
} else if (target) {
removeStyle(target, ['question-field']);
if (getPrevTile.value(target)?.classList.contains('direction-marking-tile')) {
iterateCrosswordTiles(
target,
addStyle,
['selected-to-word-search', 'direction-marking-tile'],
);
}
}
TEMPLATE of ParentComponent
<div
class="csw-grid"
#input="handleKeyboardEvent($event as any)"
#mousedown.left.stop="handleClickEvent($event)"
#click.stop="">
<div v-for="row in 10" :key="row" class="csw-row" :id="`csw-row-${row}`">
<CrosswordTile
v-for="col in 8"
:key="`${col}-${row}`"
#click.right.prevent='handleTileTypeChange($event.target)'
/>
</div>
</div>
I tried to use v-if inside CrosswordTile, but it creates a new element, but I just need to modify the original one (to add/remove HTML classes from it basing on logic inside CrosswordGrid component).
How can I get access to the current component instance properties when using the composition API in script setup or how to replace the tag dynamically?
:is and is doesn't work at all.
I've got a very simple function, of replacing the innerHTML of a element. I've been trying to debug this for hours but simply can't, and it's infuriating.
When called from a button press the JavaScript (as follows) works well, but when called from another function it doesn't work. I am totally lost as to why this might be, and its a fairly core part of my app
// This loaded function in my actual code is a document listener
// checking for when Cordova is loaded which then calls the loaded function
loaded();
function loaded() {
alert("loaded");
changeText();
}
function changeText() {
alert("started");
document.getElementById('boldStuff').innerHTML = 'Fred Flinstone';
}
Button press and HTML to replace
<div id="main">
<input type='button' onclick='changeText()' value='Change Text'/>
<p>Change this text >> <b id='boldStuff'> THIS TEXT</b> </p>
</div>
It is also here in full on JSFiddle
You are already changed the innerHTML by calling the function loaded(); on onLoad.
Put this in an empty file and same as .html and open with browser and try. I have commented the function loaded();. Now it will be changed in onclick.
<div id="main">
<input type='button' onclick='changeText();' value='Change Text'/>
<p>Change this text >> <b id='boldStuff'> THIS TEXT</b> </p>
</div>
<script>
//loaded();
function loaded() {
alert("loaded");
changeText();
}
function changeText() {
alert("started");
document.getElementById('boldStuff').innerHTML = 'Fred Flinstone';
}
</script>
The problem here is, that the element you're trying to manipulate is not yet existing when you are calling the changeText() function.
To ensure that the code is only executed after the page has finished loading (and all elements are in place) you can use the onload handler on the body element like this:
<body onload="loaded();">
Additionally you should know, that it's very bad practice to manipulate values by using the innerHTML property. The correct way is to use DOM Manipulations, maybe this can help you.
You script loads before the element (boldStuff) is loaded,
Test Link - 1 - Put the js in a seperate file
Test Link - 2 - put the js at the very end, before closing the <body>
I have a Windows 8 app with a template that contains a div I want to show or hide based on the value of a property inside a data-win-control="WinJS.Binding.Template". I have tried the following without luck:
<div data-win-bind="visible: isMore"> ..content... </div>
where isMore is a boolean property of the databound item.
How can I do that? I guess the visible property does not exist?
You are right - the visible property doesn't exist, but you can control the appearance using CSS and a binding converter.
First, use WinJS.Binding.converter to create a converter function that translates a boolean to a value value for the CSS display property, like this:
var myConverter = WinJS.Binding.converter(function (val) {
return val ? "block" : "none";
});
Make sure that the function is globally available - I use WinJS.Namespace.define to create collections of these converters that I can get to globally.
Now you can use the converter in your data binding to control the CSS display property, like this:
<div data-win-bind="style.display: isMore myConverter"> ..content... </div>
I have a problem with this jQuery Change function:
<input type="radio" name="words" value="8" checked><span class="word">word1</span>
<input type="radio" name="words" value="6"><span class="word">word2</span>
$("input[#name='words']:checked").change(function(){
alert("test");
});
The problem is that the event gets only triggered when I click the first option (value=8) which is checked by default.
How Can I trigger the event when clicking any other option?
Please note: I have tried the above function on both Chrome and Firefox and I have the same problem.
Thanks!
should be $("input[name='words']").change(function(){
You are only binding the event handler to :checked elements. So as the first input has the checked property set, that's the only one that receives the event handler. Remove :checked and it should work fine:
$("input[name='words']").change(function(){
alert("test");
});
Here's a working example. Note that I've also removed the # character from your selector. You haven't needed it since like jQuery 1.2 or something like that.
$("input[#name='words']:checked").change(function(){
That finds all the input elements with the name words (actually, it won't work: the XPath-style # attribute selector has been removed since jQuery 1.3) that are checked and binds an event handler to them. If the elements are not checked when the selection is made, no event handlers will be bound to them.
The easiest solution is to bind to all relevant elements, and only fire code if they have been unchecked:
$('input[name="words"]').change(function() {
if (!this.checked) { // checkbox was checked, now is not
alert('unchecked');
}
});
working link
$("input[name='words']").change(function(){
alert("test");
});
$("input[#name='words']:checked").change(function(){
alert("test");
});
You've subscribed change function only to the radiobuttons whitch is checked (:checked). Remove it from selector.
$("input[name='words']").change(function(){
alert("test");
});
Code: http://jsfiddle.net/DRasw/1/
Give id property of Radio buttons
Add property of OnClick="CheckClick()" on second redio button.
In jquery CheckClick() function
if ($('#rb2').attr('checked')) {
alert('rb2 test');
}
I have two Hyper Links on to a DOJO DIv
var create = dojo.create("div",{
id:"create_links",
className:"iconRow1",
innerHTML:"<a class='popupLink' href='javascript:openCreateDialog()'>Create </a> <span>|</span><a href='javascript:openUploadDialog()'>Batch </a>"
},dojo.query(".ui-jqgrid-titlebar")[0]);
On click of the Batch Hyperlink , i have a function
function openUploadDialog()
{
// Here i want to disable the Create Hyper Link tried this way
dojo.byId('create_links')[1].disabled=true; // Not working
}
See whether i can answer your question.
HTML Part:
<div id="create_links">
g
h
</div>
JS Part:
dojo.addOnLoad(function() {
var a = dojo.query("#create_links a")[1];
dojo.connect(a,'click',function(e){
console.log(e.preventDefault())
})
})
#Kiran, you are treating the return of dojo.byId('create_links') like an array when that statement will return to you a node on the dom.
Also, hyperlinks don't support a disabled attribute to prevent them from being actionable. You could probably create a click handler that returns false to accomplish this type of functionality, or like #rajkamal mentioned, calling e.preventDefault(). #rajkamal also provides a good solution to selection the link properly.