I am a bit new to JavaScript, and just want to search my website for a particular string of text and find it, list it or whatever.
I looked at this solution:
Javascript Search Engine (Search own site)
But am not getting what I want out of it. I'm sure my syntax from HTML to JavaScript is a bit off. I am happy to search the current page for now, but will ultimately want to span across all HTML pages, which are all in a single directory.
Here is my code, and it does not error, but it also does not appear to do anything except clear the textbox.
I have gone through a plethora of examples using W3Schools and some other textbooks on Safari
<!DOCTYPE HTML>
<head>
<style>
</style>
</head>
<body>
<br>
<input type="number" id="str">
<button onclick="findInPage(str.value)">Search</button>
<script language=JavaScript>
var NS4 = (document.layers);
var IE4 = (document.all);
var win = window;
var n = 0;
function findInPage(str) {
var txt, i, found;
if (str == "")
return false;
if (NS4) {
if (!win.find(str))
while(win.find(str, false, true))
n++;
else
n++;
if (n == 0)
alert("Not found.");
}
if (IE4) {
txt = win.document.body.createTextRange();
for (i = 0; i <= n && (found = txt.findText(str)) != false; i++) {
txt.moveStart("character", 1);
txt.moveEnd("textedit");
}
if (found) {
txt.moveStart("character", -1);
txt.findText(str);
txt.select();
txt.scrollIntoView();
n++;
}
else {
if (n > 0) {
n = 0;
findInPage(str);
}
else
alert("Sorry, we couldn't find. Try again");
}
}
return false;
}
</script>
</body>
</HTML>
Related
<html>
<script>
var tal;
var array = [];
var element=parseIFloat();
function bubbleSort(A){
var swapped,
len = A.length;
if(len === 1) return;
do {
swapped = false;
for(var i=1;i<len;i++) {
if(A[i-1] > A[i]) {
var b = A[i];
A[i] = A[i-1];
A[i-1] = b;
swapped = true;
}
}
}
while(swapped)
}
function insertnumber(){
var element=document.getElementById("element").value;
insert (element,array);
}
function insert(element, array) {
array.push(element);
alert(array);
bubbleSort(array);
alert(array);
}
</script>
<body>
<input type="button" value="Mata in" onclick="insertnumber()" id="resultat">
tal<input type="number" id="element" autofocus>
</body>
</html>
This my code but i really dont know how to get it working again, my problem is that i cant get it to read numbers correctly, trying to use "var element=parseIFloat(); " but that doesnt seem to work..
Thanks :)
Sure, var element=parseIFloat();
was meant to be var element=parseFloat();
and put between
var element=document.getElementById("element").value;
and
insert (element,array);
1.hey guys,how do i separate these?
2.sorry im newb in this,but been cracking my head for a while,how to make this code write sentences separetly without writing them non stop?
<html>
<body>
<script type="text/javascript">
var x=[15,22,28,30,25,11,12,29,27,26];//right numbers
var c=1;
var e=0;
var i=0;
for (c=1;c<=10;c++) {
var y=Number(prompt("enter number from 10 to 30",0));
for(i=0;i<=9;i++) {
if(y==x[i]) {//checking every number in array
document.write("u right.<br>");
e=e+1;
}
else {
document.write("u wrong.<br>");//this writes every time it goes trough the loop,i tried breaking,but it just quits the loop on first number in array,i tried continue,no luck
}
}
}
if(e<5) {//amount of time you guessed right
document.write("u lose ");
}
else {
document.write("u win");
}
</script>
</body>
</html>
<html>
<body>
<script type="text/javascript">
var x=[15,22,28,30,25,11,12,29,27,26];//right numbers
var c=1;
var e=0;
var i=0;
for (c=1;c<=10;c++)
{
var y=Number(prompt("enter number from 10 to 30",0));
var right = false;
for(i=0;i<=9;i++)
{
if(y==x[i]) //checking every number in array
{
right = true;
}
}
if (right)
{
e++;
document.write("u right.<br>");
}
else {
document.write("u wrong.<br>");
}
}
if(e<5)//amount of time you guessed right
{
document.write("u lose ");
}
else
{document.write("u win");}
</script>
</body>
</html>
Your code can be optimized in many areas:
<html>
<body>
<script type="text/javascript">
var x=[15,22,28,30,25,11,12,29,27,26];//right numbers
var c=1;
var e=0;
var c=0;
while (c < 10)
{
c++;
var y=Number(prompt("enter number from 10 to 30",0));
if (x.indexOf(y) != -1)
{
e++;
document.write("u right.<br>");
}
else {
document.write("u wrong.<br>");
}
}
if(e<5)//amount of time you guessed right
{
document.write("u lose ");
}
else
{
document.write("u win");
}
</script>
</body>
</html>
Use indexOf method of array for checking whether value is available in array or not.
If value is not available then return -1 else return position of that value.
<html>
<body>
<script type="text/javascript">
var x = [15,22,28,30,25,11,12,29,27,26];
var e = 0;
for (var c=1;c<=10;c++) {
var y = Number(prompt("enter number from 10 to 30",0));
x.indexOf(y) > 0?(document.write("u right.<br>"),e++):document.write("u r wrong.<br>");
}
e<5?document.write("u lose "):document.write("u win");
</script>
</body>
</html>
I am using following code to extract data from excel sheet using javascript. This is working good and after opening the HTML page, getting the data that I want and closing the page, I am unable to open and edit the excel sheet as it is throwing the exception, "File already held by the user and unable to be edited". Is there anyway to handle the closing of excel sheet at the end of the code? Please help me.
<!DOCTYPE html>
<html>
<body>
Enter Salomon account:<br>
<input type="text" id="myText" name="SalAccount">
<br>
<button onclick="myFunction()">Submit</button>
<p id="demo"></p>
<script language="javascript" >
function myFunction()
{
alert("hello");
var excel = new ActiveXObject("Excel.Application");
var excel_file = excel.Workbooks.Open("C:/Users/bv15457/Desktop/test1.xlsx");
var excel_sheet = excel.Worksheets("Sheet1");
var x = document.getElementById("myText").value;
var lo = 1;
var hi = 682220;
var mid;
var element;
var Flag = 0;
while(lo <= hi && Flag != 1)
{
mid = Math.floor((lo + hi) / 2, 10);
element = excel_sheet.Cells(mid,1).Value;
if (element < x)
{
lo = mid + 1;
}
else if (element > x)
{
hi = mid - 1;
}
else
{
document.getElementById("demo").innerHTML = excel_sheet.Cells(mid,2).Value;
Flag = 1;
}
}
if (Flag != 1)
{
alert("Account is not found in XREF file");
}
}
</script>
</body>
</html>
I know this is an on going concern in IT these days with different versions of IE being used between different machines, but I was wondering if someone might be able to advise me on how to successfully make this code (which works fine for all my form validation in IE 10, FireFox, Chrome, etc) work in earlier versions of IE.
The version I am testing it against is IE7.
function validate(form){
var p = form.getElementsByTagName("p");
var valid = true;
for(var i = 0; i < p.length; i++){
var inputs = p[i].getElementsByTagName("*");
if(p[i].className == "required" || p[i].className == "required error"){
for(var n = 0; n < inputs.length; n++){
switch(inputs[n].tagName){
case "INPUT":
if(inputs[n].value.trim() == "" || inputs[n].value == null){
if(+navigator.sayswho[1] < 9){
//JavaScript for IE version 8 and below
}
else{
inputs[n].className = inputs[n].className.replace( /(?:^|\s)error(?!\S)/ , "" );
inputs[n].className = inputs[n].className+" error";
p[i].className = "required error";
}
valid = false;
}
break;
case "SELECT":
if(inputs[n].options[inputs[n].selectedIndex].value == 0 || select.value == null){
if(+navigator.sayswho[1] < 9){
//JavaScript for IE version 8 and below
}
else{
inputs[n].className = inputs[n].className.replace( /(?:^|\s)error(?!\S)/ , "" );
inputs[n].className = inputs[n].className+" error";
p[i].className = "required error";
}
valid = false;
}
break;
}
}
}
}
if(valid){
var elements = form.getElementsByTagName("*");
for(var i = 0; i < elements.length; i++){
switch(elements[i].type){
case "submit":
elements[i].disabled = true;
break;
case "reset":
elements[i].disabled = true;
break;
case "button":
elements[i].disabled = true;
break;
}
}
return true;
}
return false;
}
+navigator.sayswho[1] is a value from another question I found on here that returns an int representing the browser's version (in this case 7)
An example of a form field is:
<p class="required">
<span>Required Field</span>
<input type="text" id="username" name="username" class="logon_field" onfocus="clearError(this)" placeholder="Username" autofocus />
</p>
The method is called using validate(this) in the form's onsubmit attribute
Thanks in advance!
Ah.. doing some looking here on SO. Seems there are some issues with getElementsByClassName and IE7.
getElementsByName in IE7
I'd solve it by breaking things into a couple of different pieces, shown below.
Free bonus, BTW. 'addClass' 'removeClass' and 'hasClass'
It is better to put the required attribute (or the class) on the input field itself, rather than on the wrapper... though you can set the wrapper's class to show the field is in error.
<doctype html>
<html>
<head>
<title>
Test page
</title>
<script>
function hasClass(ele,cls) {
return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
}
function addClass(ele,cls) {
if (!this.hasClass(ele,cls)) ele.className += " "+cls;
}
function removeClass(ele,cls) {
if (hasClass(ele,cls)) {
var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
ele.className=ele.className.replace(reg,' ');
}
}
function clearError(element) {
}
function validate(form) {
var i, l;
var input;
// First, let's check the input fields
var inputs = form.getElementsByTagName("input");
for (i = 0; i < inputs.length; i++) {
input = inputs[i];
// Skip stuff we don't want.
// You'll want password this list yet.
if (input.type !== "text") {
continue;
}
if (input.required || hasClass(input, "required")) {
if (input.value == "") {
alert(input.name + " is required");
}
}
}
}
</script>
</head>
<body>
<form action="#" onsubmit="validate(this); return false">
<p>
<label for="username">Required Field</label>
<input type="text" class="required" id="username" name="username" class="logon_field" onfocus="clearError(this)" placeholder="Username" autofocus />
</p>
<p>
<label for="trivia">Trivia Question</trivia>
<input type="text" id="trivia" name="trivia" class="" onfocus="clearError(this)" placeholder="Username" autofocus />
</p>
<input type="submit">
</form>
</body>
</html
My question is to get onMouseover,onMouseout,onMousedown,onClick on a table row. For which i am calling javascript userdefined functions.
onMouseover --- Background color should change.
onMouseout --- Reset to original color
onClick --- First column checkbox/radio button should be set and background color should change
onMousedown --- background color should change.
My code in html is:-
<tr onMouseOver="hover(this)" onMouseOut="hover_out(this)" onMouseDown="get_first_state(this)" onClick="checkit(this)" >
and the methods in javascripts are:-
var first_state = false;
var oldcol = '#ffffff';
var oldcol_cellarray = new Array();
function hover(element) {
if (! element) element = this;
while (element.tagName != 'TR') {
element = element.parentNode;
}
if (element.style.fontWeight != 'bold') {
for (var i = 0; i<element.cells.length; i++) {
if (element.cells[i].className != "no_hover") {
oldcol_cellarray[i] = element.cells[i].style.backgroundColor;
element.cells[i].style.backgroundColor='#e6f6f6';
}
}
}
}
// -----------------------------------------------------------------------------------------------
function hover_out(element) {
if (! element) element = this;
while (element.tagName != 'TR') {
element = element.parentNode;
}
if (element.style.fontWeight != 'bold') {
for (var i = 0; i<element.cells.length; i++) {
if (element.cells[i].className != "no_hover") {
if (typeof oldcol_cellarray != undefined) {
element.cells[i].style.backgroundColor=oldcol_cellarray[i];
} else {
element.cells[i].style.backgroundColor='#ffffff';
}
//var oldcol_cellarray = new Array();
}
}
}
}
// -----------------------------------------------------------------------------------------------
function get_first_state(element) {
while (element.tagName != 'TR') {
element = element.parentNode;
}
first_state = element.cells[0].firstChild.checked;
}
// -----------------------------------------------------------------------------------------------
function checkit (element) {
while (element.tagName != 'TR') {
element = element.parentNode;
}
if (element.cells[0].firstChild.type == 'radio') {
var typ = 0;
} else if (element.cells[0].firstChild.type == 'checkbox') {
typ = 1;
}
if (element.cells[0].firstChild.checked == true && typ == 1) {
if (element.cells[0].firstChild.checked == first_state) {
element.cells[0].firstChild.checked = false;
}
set_rowstyle(element, element.cells[0].firstChild.checked);
} else {
if (typ == 0 || element.cells[0].firstChild.checked == first_state) {
element.cells[0].firstChild.checked = true;
}
set_rowstyle(element, element.cells[0].firstChild.checked);
}
if (typ == 0) {
var table = element.parentNode;
if (table.tagName != "TABLE") {
table = table.parentNode;
}
if (table.tagName == "TABLE") {
table=table.tBodies[0].rows;
//var table = document.getElementById("js_tb").tBodies[0].rows;
for (var i = 1; i< table.length; i++) {
if (table[i].cells[0].firstChild.checked == true && table[i] != element) {
table[i].cells[0].firstChild.checked = false;
}
if (table[i].cells[0].firstChild.checked == false) {
set_rowstyle(table[i], false);
}
}
}
}
}
function set_rowstyle(r, on) {
if (on == true) {
for (var i =0; i < r.cells.length; i++) {
r.style.fontWeight = 'bold';
r.cells[i].style.backgroundColor = '#f2f2c2';
}
} else {
for ( i =0; i < r.cells.length; i++) {
r.style.fontWeight = 'normal';
r.cells[i].style.backgroundColor = '#ffffff';
}
}
}
It is working as expected in IE.
But coming to firefox i am surprised on seeing the output after so much of coding.
In Firefox:--
onMouseOver is working as expected. color change of that particular row.
onClick -- Setting the background color permenantly..eventhough i do onmouseover on different rows. the clicked previous row color is not reset to white. -- not as expected
onclick on 2 rows..the background of both the rows is set..Only the latest row color should be set. other rows that are selected before should be set back..not as expected i.e if i click on all the rows..background color of everything is changed...
Eventhough i click on the row. First column i.e radio button or checkbox is not set..
Please help me to solve this issue in firefox. Do let me know where my code needs to be changed...
Thanks in advance!!
Sorry for making everything inline, but this should work in all browsers:
<tr onmouseover="this.className += ' hover'" onmouseout="this.className = this.className.replace(/(^|\s)hover(\s|$)/,' ');" onclick="if(this.getElementsByTagName('input')[0].checked){this.className = this.className.replace(/(^|\s)click(\s|$)/,' ');this.getElementsByTagName('input')[0].checked = false;}else{this.className += ' click';this.getElementsByTagName('input')[0].checked = true;}">
Here is a complete page you can test out:
<html>
<head>
<style type="text/css">
tr.click{
background:yellow;
}
tr.hover{
background:green;
}
</style>
</head>
<body>
<table border="1">
<tr onmouseover="this.className += ' hover'" onmouseout="this.className = this.className.replace(/(^|\s)hover(\s|$)/,' ');" onclick="if(this.getElementsByTagName('input')[0].checked){this.className = this.className.replace(/(^|\s)click(\s|$)/,' ');this.getElementsByTagName('input')[0].checked = false;}else{this.className += ' click';this.getElementsByTagName('input')[0].checked = true;}">
<td>
<input type="checkbox" readonly="readonly"/> click me
</td>
</tr>
<tr onmouseover="this.className += ' hover'" onmouseout="this.className = this.className.replace(/(^|\s)hover(\s|$)/,' ');" onclick="if(this.getElementsByTagName('input')[0].checked){this.className = this.className.replace(/(^|\s)click(\s|$)/,' ');this.getElementsByTagName('input')[0].checked = false;}else{this.className += ' click';this.getElementsByTagName('input')[0].checked = true;}">
<td>
<input type="checkbox" readonly="readonly"/> click me
</td>
</tr>
<tr onmouseover="this.className += ' hover'" onmouseout="this.className = this.className.replace(/(^|\s)hover(\s|$)/,' ');" onclick="if(this.getElementsByTagName('input')[0].checked){this.className = this.className.replace(/(^|\s)click(\s|$)/,' ');this.getElementsByTagName('input')[0].checked = false;}else{this.className += ' click';this.getElementsByTagName('input')[0].checked = true;}">
<td>
<input type="checkbox" readonly="readonly"/> click me
</td>
</tr>
</table>
</body>
</html>
I would strongly advise moving everything to an external JS file and using some sort of initialization function to assign the event listeners, instead of writing them all inline like me.
I hope this helps in some way.
There may be a particular reason you haven't, but have you considered using a library such as JQuery to tackle this? What you're trying to achieve here could be done very easily and simply with JQuery's CSS-like selectors and .parent/.parents.
As MartyIX says, I would start by using console.log and/or breakpoints in Firebug / Chrome to check exactly which code blocks are being executed. Using the javascript debugging tools can be a little daunting at first until you get how each of the options (step into, step over) work, but they do allow you to check that the code is working as you think it is very easily.
One thing I notice in checkit() - be careful with where you declare variables. I'm not an expert with javascripts variable scoping, but to me it looks like the typ variable only exists within the if block. I would declare "var typ" before the if block and use a third value or second variable to check whether any checkbox or radio is found (what happens if no checkbox and no radio is found?)