html - Pure Javascript to get all span elements but make editable specificly by the defined class - Stack Overflow

admin•2025-04-23 04:19:22•questions•阅读1

I need only pure javascript assistance for the following code to work as mentioned in my post title.jsf

I need only pure javascript assistance for the following code to work as mentioned in my post title.

jsfiddle: demo

Full source pasted below:

<!DOCTYPE html>
<script>
function init_events(){

if (!document.getElementsByTagName){ return; }

get all the spans here

var divReports = document.getElementById('reports');
divReports.innerHTML = '<ol><b>Reports:</b>';

var allSpans = document.getElementsByTagName('span');

// Not getting or alerting values
var allCanEditSpans = function(){
if(allSpans.className == 'canEdit'){
alert("canEdit!");
}
};

// Not getting or alerting values
var allCant_EditSpans = function(){
if(allSpans.className == 'cant_Edit'){
alert("cant_Edit!");
}
};

add events

if (document.addEventListener) { // For all browsers minus IE

divReports.innerHTML += '<li>Total '+ allSpans.length + ' spans detected.</li>';
divReports.innerHTML += '<li>Total '+ allCanEditSpans.length + ' Editable spans detected.</li>';
divReports.innerHTML += '<li>Total '+ allCant_EditSpans.length + ' Not Editable spans detected.</li>';
divReports.innerHTML += '</ol>';

divReports.innerHTML += '<ol><b>Actice Span:</b>';

for (var i=0; i<allSpans.length; i++){
var activeSpan = allSpans[i];

divReports.innerHTML += '<li>Active Span ID: ' + activeSpan.id + '\nSpan Text: ' + activeSpan.innerHTML +'</li>';

if (activeSpan.className == 'canEdit') {

activeSpan.addEventListener('mouseover', function (e) {
activeSpan.style.cursor = 'pointer';
activeSpan.title = 'Click to Edit.';
activeSpan.style.border = '1px solid red';

divReports.innerHTML += '<li>On Mouse Active Span: '+activeSpan.id +'</li>'; // Debug - Why it always takes the last span
});

activeSpan.addEventListener('mouseout', function (e) {
activeSpan.style.cursor = 'auto';
activeSpan.title = 'Click to Edit.';
activeSpan.style.border = 'none';
});

activeSpan.addEventListener('click', function (e) {
activeSpan.style.cursor = 'auto';
activeSpan.title = 'Click to Edit.';
activeSpan.style.border = '1px dotted yellow';
activeSpan.innerHTML = '<input type="text" name="txtInput">'; // Add text box
activeSpan.innerHTML += '<input type="button" name="butSave" value="Save">';    // Add Save button
activeSpan.innerHTML += '<input type="button" name="butCancel" value="Cancel">'; // Add Cancell butto
});
}

divReports.innerHTML += '</ol>';

}

}else {  // For the always BUGGY or Lonely IE!

divReports.innerHTML += '<li>Total '+ allSpans.length + ' spans detected.</li>';
divReports.innerHTML += '<li>Total '+ allCanEditSpans.length + ' Editable spans detected.</li>';
divReports.innerHTML += '<li>Total '+ allCant_EditSpans.length + ' Not Editable spans detected.</li>';
divReports.innerHTML += '</ol>';

divReports.innerHTML += '<ol><b>Actice Span:</b>';

for (var i=0; i<allSpans.length; i++){
var activeSpan = allSpans[i];

divReports.innerHTML += '<li>Active Span ID: ' + activeSpan.id + '\nSpan Text: ' + activeSpan.innerHTML +'</li>';

check if they are of a canEdit class

if (activeSpan.className == 'canEdit') {

activeSpan.attachEvent('onmouseover', function (e) {
activeSpan.style.cursor = 'pointer';
activeSpan.title = 'Click to Edit.';
activeSpan.style.border = '1px solid red';

divReports.innerHTML += '<li>On Mouse Active Span: '+activeSpan.id +'</li>'; // Debug - Why it always takes the last span

});

activeSpan.attachEvent('onmouseout', function (e) {
activeSpan.style.cursor = 'auto';
activeSpan.title = 'Click to Edit.';
activeSpan.style.border = 'none';
});

activeSpan.attachEvent('onclick', function (e) {
activeSpan.style.cursor = 'auto';
activeSpan.title = 'Click to Edit.';
activeSpan.style.border = '1px dotted yellow';
activeSpan.innerHTML = '<input type="text" name="txtInput">'; // Add text box
activeSpan.innerHTML += '<input type="button" name="butSave" value="Save">';    // Add Save button
activeSpan.innerHTML += '<input type="button" name="butCancel" value="Cancel">'; // Add Cancell butto
});
}

}

divReports.innerHTML += '</ol>';

}


// DEBUG TEST -> START

var spans = document.getElementsByTagName("span");
for (var i = 0; i < spans.length; i++) {
if (spans[i].className == 'canEdit') {
spans[i].style.backgroundColor = '#999dee';
}

if (spans[i].className == 'cant_Edit') {
spans[i].style.backgroundColor = '#555dee';
}

}

// DEUG TEST <- END
}



</script>

<span id="span_1" class="canEdit">I am editable!</span>
<br>
<span id="span_2" class="cant_Edit">I am not editable!</span>
<br>
<span id="span_3" class="canEdit">I am editable!</span>
<br>
<hr>
<p>Not span</p>

<table border="1">
<tr>
<td><span id="span_td1" class="cant_Edit">I am not editable!</span></td>
<td><span id="span_td2" class="canEdit">I am editable!</span></td>
<td><span id="span_td3" class="cant_Edit">I am not editable!</span></td>
<td>Not span</td>
</tr>
</table>
<hr>

<div id="reports">
</div>

<script>
init_events();
</script>

I need only pure javascript assistance for the following code to work as mentioned in my post title.

jsfiddle: demo

Full source pasted below:

<!DOCTYPE html>
<script>
function init_events(){

if (!document.getElementsByTagName){ return; }

get all the spans here

var divReports = document.getElementById('reports');
divReports.innerHTML = '<ol><b>Reports:</b>';

var allSpans = document.getElementsByTagName('span');

// Not getting or alerting values
var allCanEditSpans = function(){
if(allSpans.className == 'canEdit'){
alert("canEdit!");
}
};

// Not getting or alerting values
var allCant_EditSpans = function(){
if(allSpans.className == 'cant_Edit'){
alert("cant_Edit!");
}
};

add events

if (document.addEventListener) { // For all browsers minus IE

divReports.innerHTML += '<li>Total '+ allSpans.length + ' spans detected.</li>';
divReports.innerHTML += '<li>Total '+ allCanEditSpans.length + ' Editable spans detected.</li>';
divReports.innerHTML += '<li>Total '+ allCant_EditSpans.length + ' Not Editable spans detected.</li>';
divReports.innerHTML += '</ol>';

divReports.innerHTML += '<ol><b>Actice Span:</b>';

for (var i=0; i<allSpans.length; i++){
var activeSpan = allSpans[i];

divReports.innerHTML += '<li>Active Span ID: ' + activeSpan.id + '\nSpan Text: ' + activeSpan.innerHTML +'</li>';

if (activeSpan.className == 'canEdit') {

activeSpan.addEventListener('mouseover', function (e) {
activeSpan.style.cursor = 'pointer';
activeSpan.title = 'Click to Edit.';
activeSpan.style.border = '1px solid red';

divReports.innerHTML += '<li>On Mouse Active Span: '+activeSpan.id +'</li>'; // Debug - Why it always takes the last span
});

activeSpan.addEventListener('mouseout', function (e) {
activeSpan.style.cursor = 'auto';
activeSpan.title = 'Click to Edit.';
activeSpan.style.border = 'none';
});

activeSpan.addEventListener('click', function (e) {
activeSpan.style.cursor = 'auto';
activeSpan.title = 'Click to Edit.';
activeSpan.style.border = '1px dotted yellow';
activeSpan.innerHTML = '<input type="text" name="txtInput">'; // Add text box
activeSpan.innerHTML += '<input type="button" name="butSave" value="Save">';    // Add Save button
activeSpan.innerHTML += '<input type="button" name="butCancel" value="Cancel">'; // Add Cancell butto
});
}

divReports.innerHTML += '</ol>';

}

}else {  // For the always BUGGY or Lonely IE!

divReports.innerHTML += '<li>Total '+ allSpans.length + ' spans detected.</li>';
divReports.innerHTML += '<li>Total '+ allCanEditSpans.length + ' Editable spans detected.</li>';
divReports.innerHTML += '<li>Total '+ allCant_EditSpans.length + ' Not Editable spans detected.</li>';
divReports.innerHTML += '</ol>';

divReports.innerHTML += '<ol><b>Actice Span:</b>';

for (var i=0; i<allSpans.length; i++){
var activeSpan = allSpans[i];

divReports.innerHTML += '<li>Active Span ID: ' + activeSpan.id + '\nSpan Text: ' + activeSpan.innerHTML +'</li>';

check if they are of a canEdit class

if (activeSpan.className == 'canEdit') {

activeSpan.attachEvent('onmouseover', function (e) {
activeSpan.style.cursor = 'pointer';
activeSpan.title = 'Click to Edit.';
activeSpan.style.border = '1px solid red';

divReports.innerHTML += '<li>On Mouse Active Span: '+activeSpan.id +'</li>'; // Debug - Why it always takes the last span

});

activeSpan.attachEvent('onmouseout', function (e) {
activeSpan.style.cursor = 'auto';
activeSpan.title = 'Click to Edit.';
activeSpan.style.border = 'none';
});

activeSpan.attachEvent('onclick', function (e) {
activeSpan.style.cursor = 'auto';
activeSpan.title = 'Click to Edit.';
activeSpan.style.border = '1px dotted yellow';
activeSpan.innerHTML = '<input type="text" name="txtInput">'; // Add text box
activeSpan.innerHTML += '<input type="button" name="butSave" value="Save">';    // Add Save button
activeSpan.innerHTML += '<input type="button" name="butCancel" value="Cancel">'; // Add Cancell butto
});
}

}

divReports.innerHTML += '</ol>';

}


// DEBUG TEST -> START

var spans = document.getElementsByTagName("span");
for (var i = 0; i < spans.length; i++) {
if (spans[i].className == 'canEdit') {
spans[i].style.backgroundColor = '#999dee';
}

if (spans[i].className == 'cant_Edit') {
spans[i].style.backgroundColor = '#555dee';
}

}

// DEUG TEST <- END
}



</script>

<span id="span_1" class="canEdit">I am editable!</span>
<br>
<span id="span_2" class="cant_Edit">I am not editable!</span>
<br>
<span id="span_3" class="canEdit">I am editable!</span>
<br>
<hr>
<p>Not span</p>

<table border="1">
<tr>
<td><span id="span_td1" class="cant_Edit">I am not editable!</span></td>
<td><span id="span_td2" class="canEdit">I am editable!</span></td>
<td><span id="span_td3" class="cant_Edit">I am not editable!</span></td>
<td>Not span</td>
</tr>
</table>
<hr>

<div id="reports">
</div>

<script>
init_events();
</script>

Share Improve this question edited Jun 27, 2014 at 18:36 Sam 7,40616 gold badges48 silver badges68 bronze badges asked Aug 6, 2013 at 7:42 samimi_it 751 gold badge2 silver badges11 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 2

// Not getting or alerting values

var allCanEditSpans = function(){
  if(allSpans.className == 'canEdit') {
...

var allSpans = document.getElementsByTagName('span'); //allSpans is an HTMLCollection

The result of getElementsByTagName is an HTMLCollection, which doesn't have a className property.

var allCanEditSpans = function(){
    var count = 0;
    for(var i = 0; i < allSpans.length; i ++) {
        if(allSpans[i].className === 'canEdit') {
            count ++;
        }
    }
    return count;
}();

And use it like this:

divReports.innerHTML += '<li>Total '+ allCanEditSpans + ' Editable spans detected.</li>';

For newer browsers, you can use Array.prototype.filter as in:

var allCant_EditSpans = function() {
    return Array.prototype.filter.call(allSpans, function(span) {
        return span.className === 'cant_Edit';
    }).length;
}();

Using the new Selectors API:

var allCanEditSpans = document.querySelectorAll('span.canEdit').length;

Updated jsFiddle Demo

EDIT: For the event listener part, you need to create a closure

if (activeSpan.className == 'canEdit') {

    (function(aSpan) {
        aSpan.addEventListener('mouseover', function (e) {
        aSpan.style.cursor = 'pointer';
        aSpan.title = 'Click to Edit.';
        aSpan.style.border = '1px solid red';

        divReports.innerHTML += '<li>On Mouse Active Span: '+aSpan.id +'</li>'; // Debug - Why it always takes the last span
    })(activeSpan);
}

jsFiddle Demo

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745315857a4622215.html

admin

questions
r - Converting Forecast Package Plots to Plotly - Stack Overflow
I'm trying to convert an object compatible with the forecast package into a Plotly object.library
admin
23分钟前
00
questions
javascript - Loop through an array of objects and sort them - Stack Overflow
I have an array containing some objects and I am trying to loop through it where I have data stored in
admin
22分钟前
20
questions
c++ - Why is sfml entity.setOrigin() not working? - Stack Overflow
I wrote some SFML code in C++ to set the sprite's origin to its center (0.125f) so that i can rota
admin
21分钟前
00
questions
javascript - Why doesn't my JS script load?
To finish my website I need to add a JS script which is applied to the header. I installed a plugin called "JavaScr
admin
20分钟前
10
questions
Javascript Form Post with Jersey MultiFormData - Null Pointer Exception - Stack Overflow
I'm trying to post some form data using javascript against a Jersey Resource. Here is the javascri
admin
19分钟前
10
questions
javascript - Not setting focus to text field in Firefox - Stack Overflow
I faced a very interesting issue.I'm trying to set the focus on a input field using Javascript (n
admin
19分钟前
00
questions
javascript - How can I get a PixelsObject from a Texture in Incisor? - Stack Overflow
I'm following the Incisor API documentation to create a PixelsObject from a graphic. I've con
admin
18分钟前
10
questions
Composer fails to download PHP Codesniffer to plugin
I am getting an error when trying to install the squizlabsphp_codesniffer package via composer into my WordPress plugin
admin
17分钟前
10
questions
javascript - ExecJS runtime error - Stack Overflow
I have installed nodejs on ubuntu 12.04 server and I want to know why I have problems when piling asset
admin
16分钟前
10
questions
javascript - Angular js ng-class false condition not working in ng-repeat - Stack Overflow
I want to highlight li if that radio is selected. Inside ng-repeat, ng-class true condition is working
admin
14分钟前
00
questions
javascript - IE11 on WIN 8.1 : window.open with the same name is opening new popup window - Stack Overflow
When running the below HTML page it is opening two popup windows. It is not the case with previous vers
admin
13分钟前
00
questions
javascript - Get initials and full last name from a string containing names - Stack Overflow
Assume there are some strings containing names in different format (each line is a possible user input)
admin
13分钟前
00
questions
How to rewrite product permalinks in Woocommerce to use category slugs
I know here is an information about the issue, but I didn't find full working solution.I need to use product catego
admin
9分钟前
00
questions
Javascript stream text in small chunks - Stack Overflow
I'm using a Vue.js app to read text from a server. The server streams small amounts of text with e
admin
9分钟前
00
questions
javascript - Why must I click twice to open and close my menu - Stack Overflow
Hello I got a situation which I do not understand quite well. I have the following setup:$(document).re
admin
7分钟前
00
questions
plugins - wp_remote_post To external API multiple values with the same key
I am trying to create a WP plugin that calls an external API using HTTP POST. I am using wp_remote_post and my arguments
admin
5分钟前
00
questions
html - Are there any javascript code (polyfill) available that enable Flexbox (2012, css3), like modernizr? - Stack Overflow
I'm looking for any javascript library that like modernizr (which actually does not) enables flexb
admin
4分钟前
00
questions
docker - Backend fails after adding SSL certificate. NestNginx - Stack Overflow
My backend is not working after adding the SSL certificate. The backend worked with http before but aft
admin
4分钟前
00
questions
android - Custom view doesn't making wider - Stack Overflow
I have three custom views: SmallBannerView, LargeBannerView and, like base for previous two, BannerView
admin
3分钟前
00
questions
theme development - Can you filter posts by meta key with the getEntitityRecords selector?
As my first foray into WP5-era theme development I am trying to develop blocks to replace where I would normally use sho
admin
1分钟前
10

发表回复

评论列表（0条）

暂无评论

html - Pure Javascript to get all span elements but make editable specificly by the defined class - Stack Overflow

1 Answer 1

发表回复

评论列表（0条）

联系我们

400-800-8888

html - Pure Javascript to get all span elements but make editable specificly by the defined class - Stack Overflow

1 Answer 1

相关推荐

发表回复

评论列表（0条）

联系我们

400-800-8888