Bind value of elements - javascript

Can i execute custom function when some properties of html tag is changed?
For example:
HTML code
<a id="link1">title</a>
<a id="link2">title</a>
When we change link2 text i want to change link1 text. So i want something like DataBinding in Windows Presentation Foundation.
We are changing link2: $('#link2').text('blablablaballba'); and value of link1 must be "blablablaballba". I dont want to write additional code $('#link1').text('blablablaballba'); and so on. link1 must be changed automatically.

You can write:
$('#link2, #link1').text('blablablaballba');

You can use a periodic interval to check the contents, like:
var timerID;
function watchLink2() {
var el = document.getElementById("link2");
return function () {
if (el.innerHTML != "title") {
document.getElementById("link1").innerHTML = el.innerHTML;
clearInterval(timerID);
}
};
}
timerID = setInterval(watchLink2(), 200);
But, er..., how do you think the attribute's value is changed?

Related

changing innerHTML of child element using javascript

I would like to change my icon from expand_more to expand_less in following code
<li class="dropdown-bt" onclick="dropdown('content');">
<a>dropdown-content <i class="material-icons">expand_more</i></a>
</li>
I am going to use same code multiple times so it would be better to using function multiple times. I thought of using ID for every piece of code but it would be to hectic. So I want to write single function do it but I don't know how, so please help.
Just pass an object event as a parameter, say e to your dropdown() and use the textContent property to retrieve the current element content, check it's value and replace the content with another text content like this:
var btn = document.getElementById("dropdownBt");
function dropdown(e) {
var innerText = e.target.children[0];
if(innerText.textContent == "expand_more") {
innerText.textContent = "expand_less";
} else {
innerText.textContent = "expand_more";
}
}
btn.addEventListener('click', dropdown);
<li class="dropdown-bt" id="dropdownBt"><a>dropdown-content <i class="material-icons">expand_more</i></a></li>

How to change an <href> of an element in a <li> that's inside of a <div> using JS?

Please help to solve my issue.
I'm a novice in JS so I can't understand how to do this: I need to replace parameters in a following string from
to
of an existing page using GreaseMonkey script. Here is the part of the page HTML code itself:
<div class="profile-gallery-inner-wrapper">
<ul class="profile-gallery js-photos-container">
<!--Empty sections-->
<li class="profile-gallery__item profile-gallery__item--no-image">
</li>)
</ul>
<!--Gallery navigation-->
</div>
Please help me with the JS code.
UPD. Solved the issue. It runs now. Somewhat not as expected, but it works.
// ==UserScript==
// #name Kismia
// #namespace kismia.com
// #match *://*kismia.com/*
// #require https://code.jquery.com/jquery-3.1.0.min.js
// #version 1
// #grant none
// ==/UserScript==
function ch_href () {
var a = document.querySelector('.profile-gallery__item__link');
if (a) {
a.setAttribute('href', 'javascript:PhotoUploadDialog.show\(false, \'crop_split\'\)\;');
}
}
ch_href();
$(window).load (ch_href);
Keeping as close to the code you have at the moment, you could add an id to the <a> tag to identify it easier, for example
<a id="myLink" href="javascript:PhotoUploadDialog.show(false, 'crop_moderation_split');" class="profile-gallery__item__link"></a>
<script>
function changeLink() {
var link = document.getElementById("myLink");
link.setAttribute('href', "javascript:PhotoUploadDialog.show(false, 'crop_split');");
}
</script>
The way it works is it uses the getElementById method to get the exact tag and store a reference to it in a variable called link, then you can perform any actions you wish on it, such as setAttribute
But I'd be tempted to take a different approach for this one
<script>
var whichAction = 1;
function doAction() {
switch (whichAction) {
case 1:
PhotoUploadDialog.show(false, 'crop_moderation_split');
break;
case 2:
PhotoUploadDialog.show(false, 'crop_split');
break;
}
return false;
}
function changeLink() {
whichAction = 2;
}
</script>
What's going on here, is you are first storing a variable called whichAction and setting it to a value of 1. When you click on the link, a function called doAction() is called, which looks at the value of whichAction and performs whichever task is appropriate. Of course you could add as many cases in here as you wish if you need to have more choices in the future.
Now all your changeLink() function needs to do is change the value of your whichAction variable.
A further thing to note, is at the end of the doAction() function, you must have return false;, this tells the browser not to continue to follow the link in the href= attribute.
Since the <li> element has the class profile-gallery__item, you can do this.
let anchor = document.getElementsByClassName("profile-gallery__item a")
anchor.setAttribute("href", "javascript:PhotoUploadDialog.show(false, 'crop_split');")
Just select anchor element and change attribute.
const anchor = document.querySelector('.profile-gallery__item__link');
anchor.setAttribute('href', 'javascript:PhotoUploadDialog.show(false, 'crop_split');')
If you need to change attribute for multiple links you can select them all and do that in the loop like this:
const anchorAll = document.querySelectorAll('.profile-gallery__item__link');
for (let i = 0; i < anchorAll.lenght; i++) {
anchorAll[i].setAttribute('href', "javascript:PhotoUploadDialog.show(false, 'crop_split');")}

Jquery: Replace a part of each attribute [duplicate]

Do someone know what is the best way to replace some string inside a onclick attribute ?
I need to get the current value and replace some text inside parameters.
Exemple, I have this link:
My link
And I want this:
My link
In other words, I want something like this:
$('a').attr('onclick', $(this).attr('onclick').replace('1', '2'));
And I know I can do this, but I need something dynamic retreiving the values of current element:
$("a").attr('onClick', "myfunction('parameter2a','parameter2b')");
Finally it working when I made a simple demo: http://jsfiddle.net/GkWhh/4/
Thank you for your solutions !
$('a[onclick]').attr('onclick', function(i, v){
return v.replace(/1/g, '2');
});
http://jsfiddle.net/cj9j7/
If you need something more dynamic do not use onclick attributes, changing onclick attributes is hackish, you can use click method instead.
var param = 1;
$('a').click(function(){
// ...
if ('wildguess') {
param = 1;
} else {
param++;
}
})
sounds like a really bad idea but anyway - you can access the string value of the onlick attribute using something like that:
$('a').each(function() { this.attributes.onclick.nodeValue = this.attributes.onclick.nodeValue.replace('1', '2'); })
You can do this: http://jsfiddle.net/SJP7k/
var atr = $('a').attr('onclick');
var str = atr.split('1');
var natr = str.join('2');
$('a').attr('onclick',natr);

How to change a span label's class using Javascript

I have an html element like this:
<dd><span class="label label-success" id="status">Production</span></dd>
I want to change it to
<dd><span class="label label-warning" id="status">Idle</span>
based on a ws.socket message.
setTimeout(function(){
window.ws = new WebSocket('ws://localhost:8088/sock/123');
window.ws.onmessage = function (evt) {
field.value = "Idle"
};
window.ws.onclose = function (evt){
}
window.ws.onopen = function (evt){
}
}, 500);
I want to change the value from Production to Idle and the class to "label label-warning".
I know to change the value I would do this:
var field = document.getElementById("status")
but I'm not exactly sure how to change the class and would using field.value be the correct way to change a span text?
You have jQuery, use it!
$("#status").text("Idle").removeClass("label-success").addClass("label-warning");
Or just .toggleClass("label-success label-warning");
Use Jquery
Try this
$('#status').text('Your Text') //For setting text
$('#status').removeClass('label-success').addClass('label-warning')
If you are just wanting to use JavaScript and not jQuery, you can refer to this answer. You can easily set the class by just saying:
document.getElementById("whatever").className = "";
To change the class (this is much more convenient using jQuery):
document.getElementsById('status').setAttribute("class","label label-warning");
To change the value of the span text:
document.getElementsById('status').innerHTML = "Production";

Get Span Tag Id in a tag using Javascript

I'm trying to get id of the span tag that is M24 by using Javascript function.
<a HREF="javascript:void(0)"><font color="#000080"><span id=M24>2012-2013</span></font
color="#000080"></a>
I m using the following code but its not returning any value:
<SCRIPT LANGUAGE="javascript">
function clickHandler()
{
var xid=document.getElementID(this);
alert("Span id is "+xid);
}
</SCRIPT>
rewrite the function like the one below
function clickHandler()
{
var xid=document.getElementsByTagName("span");
alert("Span id is "+xid[0].id);
}
To find out multiple span id's
function clickHandler()
{
var xid=document.getElementsByTagName("span");
for(var i=0;i<xid.length;i++){
alert("Span id is "+xid[i].id);
}
instead of above functions you can simply do this, rewrite your function like this
function clickHandler(evt)
{
var e = window.event || evt;
var spanid = e.target.id;//to know on which span user has clicked.
}
and add your span's like this
<span id=M24 onclick="clickHandler(evt);">2012-2013</span>
<span id=M25 onclick="clickHandler(evt);">2012-2013</span>
...so on....
It is getElementById(), not getElementID()
Currently this representation is not correct. Since if you know the tag ID then you should use getElementById().
But in your case, use getElementsByTagName()

Categories