So this snippet of code I am working on should be sufficient.
SHORT VERSION : I want to run a script, where using MAthJax, a script will output a (Number - number)^2 but in proper math as shown in the beginning of the code. I cannot quite understand why the MathJax won't render.
Line 237 Is the line that wont render :( but 238 does just fine (not mathjax but what I want to see :( )
<head>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>MathJax example</title>
<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=TeX-MML-AM_CHTML" async>
</script>
</head>
<body>
<div id="Table Section">
<!-- Needs to have one section for a value, dev and dev squared-->
<table id="Final Results">
<tr>
<!-- Needs to have one section for a value, dev and dev squared-->
<th>
<!-- Random Numbers -->
<p id="Random_Number_1"> R1C1</p>
</th>
<th>
<p id="Deviation_1">R1C2</p>
</th>
<th>
<p id="Deviation_Squared_1">R1C3</p>
</th>
</tr>
<tr>
<!-- Needs to have one section for a value, dev and dev squared-->
<th>
<!-- Random Numbers -->
<p id="Random_Number_2">R2C1</p>
</th>
<th>
<p id="Deviation_2">R2C2</p>
</th>
<th>
<p id="Deviation_Squared_2">R2C3</p>
</th>
</tr>
<tr>
<!-- Needs to have one section for a value, dev and dev squared-->
<th>
<!-- Random Numbers -->
<p id="Random_Number_3">R3C1</p>
</th>
<th>
<p id="Deviation_3">R3C2</p>
</th>
<th>
<p id="Deviation_Squared_3">R3C3</p>
</th>
</tr>
<tr>
<!-- Needs to have one section for a value, dev and dev squared-->
<th>
<!-- Random Numbers -->
<p id="Random_Number_4">R4C1</p>
</th>
<th>
<p id="Deviation_4">R4C2</p>
</th>
<th>
<p id="Deviation_Squared_4">R4C3</p>
</th>
</tr>
</table>
<p id="Sum_of_All_Numbers_For_User"></p>
<p id="Sample_Size_Is"></p>
<p id="Average_is"></p>
<p id="Sum_of_Squared_Deviations_is"></p>
<p id="Variance_is"></p>
<p id="Standard_Deviation_Final_Answer"></p>
</div>
<div id="Beginning_Instructions">
<p id="Instruction_Number_One">Click the button to display a random number between 1 and 100.</p>
<p id="Instruction_Number_Two">Once you begin, you will be prompted to find the average of those 4 numbers that will pop up</p>
<button onclick="Random_Number_Generator_and_Solver()">Try it</button>
<p id="Testing Ground"> $$ (a-b)^2 $$</p>
</div>
<div id="Average">
<div id="Average_Instructions" hidden>
<p id="Average_Instructions_Number_Technical"> First let us try to find the sum of all of the random numbers.</p>
<p id="Average_Instructions_Number_Simplified"> In short add them all up </p>
<p id="Average_Sum_Value_Text">So the sum of all of those numbers is... <input id="User_Sum_of_Numbers"><button onclick="Sum_of_All_Numbers()">Is this my sum?</button></p>
<p id="The_Sum_Is" hidden> Incorrect Please add them up again</p>
</div>
<div id="Average_Instructions_Part_2" hidden>
<p id="Average_Instructions_Sample_Size"> How many numbers from the data set are we dealing with?<input id="User_Sample_Size">Is this my Sample Size?<button onclick="Sample_Size_for_Average()"> Check my Sample Size </button> </p>
<p id="Incorrect_Sample_Size" hidden> Hint: How many numbers are in the first column?</p>
</div>
<div id="Average_Instructions_Part_3" hidden>
<p id="Average_Instructions_Division"> So the actual average is the sum / sample size and that is <input id="User_Average"><button onclick="Continue_to_Deviations()"> Check my Average </button> </p>
<p id="incorrect average" hidden>Sorry check that again</p>
</div>
</div>
<div id="Deviation">
<div id="Find_Deviation_1" hidden>
<p id="Insert_Deviation_Equation_1"></p> <input id="User_Deviation_1"></input>
<button onclick="First_Deviation()">Check It</button>
<p id="Error_First_Deviation" hidden> Sorry that is not correct try again
</div>
<div id="Find_Deviation_2" hidden>
<p id="Insert_Deviation_Equation_2"></p> <input id="User_Deviation_2"></input> <button onclick="Second_Deviation()">Check It</button>
<p id="Error_Second_Deviation" hidden> Sorry that is not correct try again
</div>
<div id="Find_Deviation_3" hidden>
<p id="Insert_Deviation_Equation_3"></p><input id="User_Deviation_3"></input>
<button onclick="Third_Deviation()">Check It</button>
<p id="Error_Third_Deviation" hidden> Sorry that is not correct try again
</div>
<div id="Find_Deviation_4" hidden>
<p id="Insert_Deviation_Equation_4"></p><input id="User_Deviation_4"></input>
<button onclick="Fourth_Deviation()">Check It</button>
<p id="Error_Fourth_Deviation" hidden> Sorry that is not correct try again
</div>
</div>
<div id="Deviations Squared">
<div id="Find_Deviation_Squared_1">
<p id="Insert_Deviation_Squared_Equation_1"></p> <input id="User_Deviation_Squared_1"></input>
<button onclick="First_Deviation_Squared()">Check It</button>
<p id="Error_First_Deviation_Squared" hidden> Sorry that is not correct try again
</div>
<div id="Find_Deviation_Squared_2" hidden>
<p id="Insert_Deviation_Squared_Equation_2"></p> <input id="User_Deviation_Squared_2"></input> <button onclick="Second_Deviation_Squared()">Check It</button>
<p id="Error_Second_Deviation_Squared" hidden> Sorry that is not correct try again
</div>
<div id="Find_Deviation_Squared_3" hidden>
<p id="Insert_Deviation_Squared_Equation_3"></p><input id="User_Deviation_Squared_3"></input>
<button onclick="Third_Deviation_Squared()">Check It</button>
<p id="Error_Third_Deviation_Squared" hidden> Sorry that is not correct try again
</div>
<div id="Find_Deviation_Squared_4" hidden>
<p id="Insert_Deviation_Squared_Equation_4"></p><input id="User_Deviation_Squared_4"></input>
<button onclick="Fourth_Deviation_Squared()">Check It</button>
<p id="Error_Fourth_Deviation_Squared" hidden> Sorry that is not correct try again
</div>
</div>
<div id="Final Stage">
<div id="Add Squared Deviations" hidden>
<p> Now you need to find the sum of every number in the third column <input id="User_Sum_Squared_Deviations"><button onclick="Squared_Deviations_Sum()">Check it</button>
</div>
<div id="Divide By Sample Size" hidden>
<p> Take the Sum of Squared Deviations and Divide that by the sample size <input id="Variance"><button onclick="Variance_Calculation()">Check it</p>
</div>
<div id="Take The Square Root" hidden>
<p> This is the final stage, take the square root of your value. Round to 3 decimal places <input id="Standard_Deviation_User"><button onclick="Final_Stage()">Check it </button>
</div>
</div>
<div id="Finished" hidden>
<p> You have completed the course :)</p>
</div>
<div id="Background_Math" hidden>
<p id="First_Random_Value"> <input id="First_Random_Value_Fixed"></p>
<p id="First_Random_Deviation"><input id="First_Random_Deviation_Fixed"></p>
<p id="First_Random_Deviation_Squared"><input id="First_Random_Deviation_Squared_Fixed"></p>
<p id="Second_Random_Value"> <input id="Second_Random_Value_Fixed"></p>
<p id="Second_Random_Deviation"> <input id="Second_Random_Deviation_Fixed"></p>
<p id="Second_Random_Deviation_Squared"><input id="Second_Random_Deviation_Squared_Fixed"></p>
<p id="Third_Random_Value"> <input id="Third_Random_Value_Fixed"></p>
<p id="Third_Random_Deviation"><input id="Third_Random_Deviation_Fixed"></p>
<p id="Third_Random_Deviation_Squared"><input id="Third_Random_Deviation_Squared_Fixed"></p>
<p id="Fourth_Random_Value"> <input id="Fourth_Random_Value_Fixed"></p>
<p id="Fourth_Random_Deviation"><input id="Fourth_Random_Deviation_Fixed"></p>
<p id="Fourth_Random_Deviation_Squared"><input id="Fourth_Random_Deviation_Squared_Fixed"></p>
<p id="Sum_of_All_Numbers_Value"> <input id="Sum_of_All_Numbers_Fixed"></p>
<p id="Average_Value"> <input id="Average_Value_Fixed"></p>
<p id="Sum_of_Squared_Deviations_Value"> <input id="Sum_of_Squared_Deviations_Fixed"></p>
<p id="Variance_Value"> <input id="Variance_Value_Fixed"></p>
<p id="Standard_Deviation_Value"> <input id="Standard_Deviation_Fixed"></p>
</div>
<script>
function Random_Number_Generator_and_Solver() {
var Random_Number_R1_C1 = Math.floor((Math.random() * 100) + 1);
document.getElementById("Random_Number_1").innerHTML = Random_Number_R1_C1;
document.getElementById("First_Random_Value_Fixed").value = Random_Number_R1_C1;
var Random_Number_R2_C1 = Math.floor((Math.random() * 100) + 1);
document.getElementById("Random_Number_2").innerHTML = Random_Number_R2_C1;
document.getElementById("Second_Random_Value_Fixed").value = Random_Number_R2_C1;
var Random_Number_R3_C1 = Math.floor((Math.random() * 100) + 1);
document.getElementById("Random_Number_3").innerHTML = Random_Number_R3_C1;
document.getElementById("Third_Random_Value_Fixed").value = Random_Number_R3_C1;
var Random_Number_R4_C1 = Math.floor((Math.random() * 100) + 1);
document.getElementById("Random_Number_4").innerHTML = Random_Number_R4_C1;
document.getElementById("Fourth_Random_Value_Fixed").value = Random_Number_R4_C1;
var Sum_of_Values = Random_Number_R1_C1 + Random_Number_R2_C1 + Random_Number_R3_C1 + Random_Number_R4_C1;
document.getElementById("Sum_of_All_Numbers_Fixed").value = Sum_of_Values;
var Average = Sum_of_Values / 4;
document.getElementById("Average_Value_Fixed").value = Average;
var Sum_of_Squared_Deviations = Math.pow((Random_Number_R1_C1 - Average), 2) + Math.pow((Random_Number_R2_C1 - Average), 2) + Math.pow((Random_Number_R3_C1 - Average), 2) + Math.pow((Random_Number_R4_C1 - Average), 2);
document.getElementById("Sum_of_Squared_Deviations_Fixed").value = Sum_of_Squared_Deviations;
var Variance = Sum_of_Squared_Deviations / 4;
document.getElementById("Variance_Value_Fixed").value = Variance;
var Standard_Deviation = Math.pow(Variance, .5);
document.getElementById("Standard_Deviation_Fixed").value = Standard_Deviation;
var Deviation_1 = Random_Number_R1_C1 - Average;
document.getElementById("First_Random_Deviation_Fixed").value = Deviation_1;
var Deviation_2 = Random_Number_R2_C1 - Average;
document.getElementById("Second_Random_Deviation_Fixed").value = Deviation_2;
var Deviation_3 = Random_Number_R3_C1 - Average;
document.getElementById("Third_Random_Deviation_Fixed").value = Deviation_3;
var Deviation_4 = Random_Number_R4_C1 - Average;
document.getElementById("Fourth_Random_Deviation_Fixed").value = Deviation_4;
var Deviation_1_Squared = Math.pow(Deviation_1, 2);
document.getElementById("First_Random_Deviation_Squared_Fixed").value = Deviation_1_Squared;
var Deviation_2_Squared = Math.pow(Deviation_2, 2);
document.getElementById("Second_Random_Deviation_Squared_Fixed").value = Deviation_2_Squared;
var Deviation_3_Squared = Math.pow(Deviation_3, 2);
document.getElementById("Third_Random_Deviation_Squared_Fixed").value = Deviation_3_Squared;
var Deviation_4_Squared = Math.pow(Deviation_4, 2);
document.getElementById("Fourth_Random_Deviation_Squared_Fixed").value = Deviation_4_Squared;
document.getElementById("Insert_Deviation_Equation_1").innerHTML = "Now let us calcululate your first deviation " + Random_Number_R1_C1 + " - " + Average;
document.getElementById("Insert_Deviation_Equation_2").innerHTML = "Now let us calcululate your second deviation " + Random_Number_R2_C1 + " - " + Average;
document.getElementById("Insert_Deviation_Equation_3").innerHTML = "Now let us calcululate your third deviation " + Random_Number_R3_C1 + " - " + Average;
document.getElementById("Insert_Deviation_Equation_4").innerHTML = "Now let us calcululate your fourth deviation " + Random_Number_R4_C1 + " - " + Average;
var squared = "<sup>2</sup>"
document.getElementById("Insert_Deviation_Squared_Equation_1").innerHTML = "Now let us calcululate your first Deviation Squared $$ (" + Random_Number_R1_C1 + " - " + Average + ")^2 $$"
document.getElementById("Insert_Deviation_Squared_Equation_2").innerHTML = "Now let us calcululate your second Deviation Squared (" + Random_Number_R2_C1 + " - " + Average + ")" + squared
document.getElementById("Insert_Deviation_Squared_Equation_3").innerHTML = "Now let us calcululate your third Deviation Squared (" + Random_Number_R3_C1 + " - " + Average + ")" + squared
document.getElementById("Insert_Deviation_Squared_Equation_4").innerHTML = "Now let us calcululate your fourth Deviation Squared (" + Random_Number_R4_C1 + " - " + Average + ")" + squared
var x = document.getElementById("Beginning_Instructions");
x.style.display = 'none';
var x = document.getElementById("Average_Instructions");
x.style.display = 'block';
}
function Sum_of_All_Numbers() {
var User_Sum = document.getElementById("User_Sum_of_Numbers").value
var Calc_Sum = document.getElementById("Sum_of_All_Numbers_Fixed").value
if (User_Sum == Calc_Sum) {
var Show_Average_Part_2 = document.getElementById("Average_Instructions_Part_2")
Show_Average_Part_2.style.display = 'block'
var Hide_Average_Instructions = document.getElementById("Average_Instructions")
Hide_Average_Instructions.style.display = 'none'
var Fixed_Sum_Value = document.getElementById("Sum_of_All_Numbers_Fixed").value
document.getElementById("Sum_of_All_Numbers_For_User").innerHTML = "The sum of all the numbers is " + Fixed_Sum_Value
} else {
var Incorrect = document.getElementById("The_Sum_Is")
Incorrect.style.display = 'block'
}
}
function Sample_Size_for_Average() {
var sample_size = document.getElementById("User_Sample_Size").value
if (sample_size == 4) {
var Show_Average_Part_3 = document.getElementById("Average_Instructions_Part_3")
Show_Average_Part_3.style.display = 'block'
var Hide_Average_Part_2 = document.getElementById("Average_Instructions_Part_2")
Hide_Average_Part_2.style.display = 'none'
document.getElementById("Sample_Size_Is").innerHTML = "The Sample Size is " + sample_size
} else {
var Show_Incorrect_Sample_Size = document.getElementById("Incorrect_Sample_Size")
Show_Incorrect_Sample_Size.style.display = 'block'
}
}
function Continue_to_Deviations() {
var User_Average = document.getElementById("User_Average").value
var Actual_Average = document.getElementById("Average_Value_Fixed").value
if (User_Average == Actual_Average) {
var Hide_Average_3 = document.getElementById("Average_Instructions_Part_3")
Hide_Average_3.style.display = 'none'
var Next_Section = document.getElementById("Find_Deviation_1")
Next_Section.style.display = 'block'
document.getElementById("Average_is").innerHTML = "The Average is " + Actual_Average
} else {
var Incorrect = document.getElementById("incorrect average")
Incorrect.style.display = 'block'
}
}
function First_Deviation() {
var Exact = document.getElementById("First_Random_Deviation_Fixed").value
var Student = document.getElementById("User_Deviation_1").value
if (Exact == Student) {
var Show_Deviation_2 = document.getElementById("Find_Deviation_2")
Show_Deviation_2.style.display = 'block'
var hide_deviation_1 = document.getElementById("Find_Deviation_1")
hide_deviation_1.style.display = 'none'
document.getElementById("Deviation_1").innerHTML = Exact
} else {
var Error_First_Deviation = document.getElementById("Error_First_Deviation")
Error_First_Deviation.style.display = 'none'
}
}
function Second_Deviation() {
var Exact = document.getElementById("Second_Random_Deviation_Fixed").value
var Student = document.getElementById("User_Deviation_2").value
if (Exact == Student) {
var Show_Deviation_2 = document.getElementById("Find_Deviation_3")
Show_Deviation_2.style.display = 'block'
var hide_deviation_1 = document.getElementById("Find_Deviation_2")
hide_deviation_1.style.display = 'none'
document.getElementById("Deviation_2").innerHTML = Exact
} else {
var Error_First_Deviation = document.getElementById("Error_Second_Deviation")
Error_First_Deviation.style.display = 'none'
}
}
function Third_Deviation() {
var Exact = document.getElementById("Third_Random_Deviation_Fixed").value
var Student = document.getElementById("User_Deviation_3").value
if (Exact == Student) {
var Show_Deviation_2 = document.getElementById("Find_Deviation_4")
Show_Deviation_2.style.display = 'block'
var hide_deviation_1 = document.getElementById("Find_Deviation_3")
hide_deviation_1.style.display = 'none'
document.getElementById("Deviation_3").innerHTML = Exact
} else {
var Error_First_Deviation = document.getElementById("Error_Third_Deviation")
Error_First_Deviation.style.display = 'none'
}
}
function Fourth_Deviation() {
var Exact = document.getElementById("Fourth_Random_Deviation_Fixed").value
var Student = document.getElementById("User_Deviation_4").value
if (Exact == Student) {
var Show_Deviation_2 = document.getElementById("Find_Deviation_Squared_1")
Show_Deviation_2.style.display = 'block'
var hide_deviation_1 = document.getElementById("Find_Deviation_4")
hide_deviation_1.style.display = 'none'
document.getElementById("Deviation_4").innerHTML = Exact
} else {
var Error_First_Deviation = document.getElementById("Error_Fourth_Deviation")
Error_First_Deviation.style.display = 'none'
}
}
function First_Deviation_Squared() {
var Exact = document.getElementById("First_Random_Deviation_Squared_Fixed").value
var Student = document.getElementById("User_Deviation_Squared_1").value
if (Exact == Student) {
var Show_Deviation_2 = document.getElementById("Find_Deviation_Squared_2")
Show_Deviation_2.style.display = 'block'
var hide_deviation_1 = document.getElementById("Find_Deviation_Squared_1")
hide_deviation_1.style.display = 'none'
document.getElementById("Deviation_Squared_1").innerHTML = Exact
} else {
var Error_First_Deviation = document.getElementById("Error_First_Deviation_Squared")
Error_First_Deviation.style.display = 'none'
}
}
function Second_Deviation_Squared() {
var Exact = document.getElementById("Second_Random_Deviation_Squared_Fixed").value
var Student = document.getElementById("User_Deviation_Squared_2").value
if (Exact == Student) {
var Show_Deviation_2 = document.getElementById("Find_Deviation_Squared_3")
Show_Deviation_2.style.display = 'block'
var hide_deviation_1 = document.getElementById("Find_Deviation_Squared_2")
hide_deviation_1.style.display = 'none'
document.getElementById("Deviation_Squared_2").innerHTML = Exact
} else {
var Error_First_Deviation = document.getElementById("Error_Second_Deviation_Squared")
Error_First_Deviation.style.display = 'none'
}
}
function Third_Deviation_Squared() {
var Exact = document.getElementById("Third_Random_Deviation_Squared_Fixed").value
var Student = document.getElementById("User_Deviation_Squared_3").value
if (Exact == Student) {
var Show_Deviation_2 = document.getElementById("Find_Deviation_Squared_4")
Show_Deviation_2.style.display = 'block'
var hide_deviation_1 = document.getElementById("Find_Deviation_Squared_3")
hide_deviation_1.style.display = 'none'
document.getElementById("Deviation_Squared_3").innerHTML = Exact
} else {
var Error_First_Deviation = document.getElementById("Error_Third_Deviation_Squared")
Error_First_Deviation.style.display = 'none'
}
}
function Fourth_Deviation_Squared() {
var Exact = document.getElementById("Fourth_Random_Deviation_Squared_Fixed").value
var Student = document.getElementById("User_Deviation_Squared_4").value
if (Exact == Student) {
var Show_Deviation_2 = document.getElementById("Add Squared Deviations")
Show_Deviation_2.style.display = 'block'
var hide_deviation_1 = document.getElementById("Find_Deviation_Squared_4")
hide_deviation_1.style.display = 'none'
document.getElementById("Deviation_Squared_4").innerHTML = Exact
} else {
var Error_First_Deviation = document.getElementById("Error_Fourth_Deviation_Squared")
Error_First_Deviation.style.display = 'none'
}
}
function Squared_Deviations_Sum() {
var Exact = document.getElementById("Sum_of_Squared_Deviations_Fixed").value
var Student = document.getElementById("User_Sum_Squared_Deviations").value
if (Exact = Student) {
var hide_deviation_squared_1 = document.getElementById("Add Squared Deviations")
hide_deviation_squared_1.style.display = 'none'
var hide_divide_by_sample_size = document.getElementById("Divide By Sample Size")
hide_divide_by_sample_size.style.display = 'block'
document.getElementById("Sum_of_Squared_Deviations_is").innerHTML = "Sum of squared devations is " + Student
}
}
function Variance_Calculation() {
var Exact = document.getElementById("Variance_Value_Fixed").value
var Student = document.getElementById("Variance").value
if (Exact == Student) {
var hide = document.getElementById("Divide By Sample Size")
hide.style.display = 'none'
var show = document.getElementById("Take The Square Root")
show.style.display = 'block'
document.getElementById("Variance_is").innerHTML = "The Variance is " + Student
}
}
</script>
</body>
</html>
I unhid the section I care most about. As you can see when you load the code, the id=Testing Area renders the code fine. I tried to duplicate it in the script down below... Figure I would show the whole code that does work in a brower. Note : had to delete a couple of functions at the end of it due to size restriction.
Related
i cant edit my body background or anything about my body from my css file. does anyone know why this might be. I know the CSS file is linked properly as it edits the table. its only the body that wont edit. please can someone tell me why this is happening.
ive had to remove some of the html code as it was aparetly too long however this is unrelated to the issue
<style>
body {
background-color: lightblue;
}
table, th, td {
border: 1px solid black;
}
th, td {
padding: 5px;
}
</style>
<!DOCTYPE html>
<script src="js.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link rel="stylesheet" href="css.css">
</link>
<body>
<div1>
<header>
<h1 id="header">Noah's Address book</h1>
</header>
<div id="tableside">
<div id="searchside">
<label for="searching">Search for address</label><br>
<input type="text" id="searching" name="searching" required><br>
</div>
<div id="table">
<table id="table1">
</table>
</div>
</div>
</div1>
<script>
$("#adContact").on("submit", function(event) {
event.preventDefault();
var $fname = $("#fname");
var fname = $fname.val();
var $lname = $("#lname");
var lname = $lname.val();
var $numb = $("#numb");
var numb = $numb.val();
var $adr = $("#adr");
var adr = $adr.val();
if (nameTest(fname, lname) === false) {
$("#error").text("First and Last name must only contain letters");
} else if (numTest(numb) === false) {
$("#error").text("Number can only contain numbers and must be in 00000000000 format");
} else if (firstLength(fname) === false) {
$("#error").text("First name input too long");
} else if (lastLength(lname) === false) {
$("#error").text("Last name input too long");
} else if (addressLength(adr) === false) {
$("#error").text("Address input too long, please keep input below 100 characters ");
} else if (alreadyActive(fname, lname, numb) === false) {
$("#error").text("contact already exists");
} else {
$("#error").text("contact added");
newContact(fname, lname, numb, adr);
}
reload()
})
$("#removeContact").on("submit", function(event) {
event.preventDefault();
var $numb1 = $("#numb1");
var numb1 = $numb1.val();
var $fname1 = $("#fname1");
var fname1 = $fname1.val();
var $lname1 = $("#lname1");
var lname1 = $lname1.val();
if (removeContact(fname1, lname1, numb1) === false) {
$("#error1").text("Contact not found");
} else {
$("#error1").text("Contact removed");
}
reload()
})
var row = "<tr><th>First name</th><th>Last name</th><th>Number</th><th>Address</th></tr>"
$("#table1").append(row)
var contactListOriginall = addressLogLength()
for (let i = 0; i < contactListOriginall.length; i++) {
let contactName = contactListOriginall[i]
var firstname = getData(contactName)[0];
var lastname = getData(contactName)[1]
var number = getData(contactName)[2]
var address = getData(contactName)[3]
let row = "<tr id=contactName><th>" + firstname + "</th><th>" + lastname + "</th><th>" + number + "</th><th>" + address + "</th></tr>"
$("#table1").append(row)
}
function reload() {
$("#table1 tr").remove()
let row = "<tr><th>First name</th><th>Last name</th><th>Number</th><th>Address</th></tr>"
$("#table1").append(row)
var $search = $("#searching");
var search = $search.val();
let contactList = match(search)
for (let c = 0; c < contactList.length; c++) {
let contactName = contactList[c]
var firstname = getData(contactName)[0];
var lastname = getData(contactName)[1]
var number = getData(contactName)[2]
var address = getData(contactName)[3]
let row = "<tr id=contactName><th>" + firstname + "</th><th>" + lastname + "</th><th>" + number + "</th><th>" + address + "</th></tr>"
$("#table1").append(row)
}
}
$("#searching").on("input", function() {
reload()
});
</script>
</body>
You don't need "style" tags because these tags only used in .html file to make .html understand that these are css codes.
Also, you may need to add "head" tags at the bottom and above like that:
<head>
<script src="js.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link rel="stylesheet" href="css.css">
</link>
</head>
If it still doesn't work add html tags like that:
<!DOCTYPE html>
<html>
<head>
<script src="js.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link rel="stylesheet" href="css.css">
</link>
</head>
<body>
<div1>
<header>
<h1 id="header">Noah's Address book</h1>
</header>
<div id="tableside">
<div id="searchside">
<label for="searching">Search for address</label><br>
<input type="text" id="searching" name="searching" required><br>
</div>
<div id="table">
<table id="table1">
</table>
</div>
</div>
</div1>
<script>
$("#adContact").on("submit", function(event) {
event.preventDefault();
var $fname = $("#fname");
var fname = $fname.val();
var $lname = $("#lname");
var lname = $lname.val();
var $numb = $("#numb");
var numb = $numb.val();
var $adr = $("#adr");
var adr = $adr.val();
if (nameTest(fname, lname) === false) {
$("#error").text("First and Last name must only contain letters");
} else if (numTest(numb) === false) {
$("#error").text("Number can only contain numbers and must be in 00000000000 format");
} else if (firstLength(fname) === false) {
$("#error").text("First name input too long");
} else if (lastLength(lname) === false) {
$("#error").text("Last name input too long");
} else if (addressLength(adr) === false) {
$("#error").text("Address input too long, please keep input below 100 characters ");
} else if (alreadyActive(fname, lname, numb) === false) {
$("#error").text("contact already exists");
} else {
$("#error").text("contact added");
newContact(fname, lname, numb, adr);
}
reload()
})
$("#removeContact").on("submit", function(event) {
event.preventDefault();
var $numb1 = $("#numb1");
var numb1 = $numb1.val();
var $fname1 = $("#fname1");
var fname1 = $fname1.val();
var $lname1 = $("#lname1");
var lname1 = $lname1.val();
if (removeContact(fname1, lname1, numb1) === false) {
$("#error1").text("Contact not found");
} else {
$("#error1").text("Contact removed");
}
reload()
})
var row = "<tr><th>First name</th><th>Last name</th><th>Number</th><th>Address</th></tr>"
$("#table1").append(row)
var contactListOriginall = addressLogLength()
for (let i = 0; i < contactListOriginall.length; i++) {
let contactName = contactListOriginall[i]
var firstname = getData(contactName)[0];
var lastname = getData(contactName)[1]
var number = getData(contactName)[2]
var address = getData(contactName)[3]
let row = "<tr id=contactName><th>" + firstname + "</th><th>" + lastname + "</th><th>" + number + "</th><th>" + address + "</th></tr>"
$("#table1").append(row)
}
function reload() {
$("#table1 tr").remove()
let row = "<tr><th>First name</th><th>Last name</th><th>Number</th><th>Address</th></tr>"
$("#table1").append(row)
var $search = $("#searching");
var search = $search.val();
let contactList = match(search)
for (let c = 0; c < contactList.length; c++) {
let contactName = contactList[c]
var firstname = getData(contactName)[0];
var lastname = getData(contactName)[1]
var number = getData(contactName)[2]
var address = getData(contactName)[3]
let row = "<tr id=contactName><th>" + firstname + "</th><th>" + lastname + "</th><th>" + number + "</th><th>" + address + "</th></tr>"
$("#table1").append(row)
}
}
$("#searching").on("input", function() {
reload()
});
</script>
</body>
</html>
Remove the surrounding <style> tags as they aren't needed because you are already in a styles file.
Inside css.css:
body {
background-color: lightblue;
}
table,
th,
td {
border: 1px solid black;
}
th,
td {
padding: 5px;
}
I am trying to create multiple input boxes in two columns. However, I cannot make the size of the boxes equal in each bootstrap row. Because I am not a web developer, any advice on how to resolve this problem would be greatly appreciated!
The reproducible example can be accessed from this link
/* create single select box */
function createSingleSelectBox(id, header_arr) {
var selectBox = document.createElement("select");
selectBox.setAttribute("id", id);
selectBox.multiple = false;
selectBox.className = "input-small w-50";
for (var i = 0; i < header_arr.length; i++) {
var op = new Option();
op.value = header_arr[i];
op.text = header_arr[i];
selectBox.options.add(op);
}
return selectBox;
}
/* create input number box */
function createInputNumberBox(id, min, step, type, my_class, default_val) {
var inputNumBox = document.createElement("input");
inputNumBox.id = id;
inputNumBox.className = my_class;
inputNumBox.type = type;
inputNumBox.step = step;
inputNumBox.min = min;
inputNumBox.value = default_val;
return inputNumBox;
}
/* create heading with icon*/
function createHeadingWithIcon(
head_type,
head_text,
icon_id,
bottom_margin_px
) {
var h = document.createElement(head_type);
h.innerHTML =
head_text +
" " +
"<i class='far fa-question-circle' " +
icon_id +
" style='color:grey'></i>";
// <i class="far fa-question-circle" id="go_tooltip" style="color:grey"></i>
h.style.marginBottom = bottom_margin_px;
return h;
}
//#######################################################################################################################
var h4 = createHeadingWithIcon("h6", "R1_C1", "id='exclusive_tooltip'", "5px");
document.getElementById("id_R1_C1").appendChild(h4);
var exclusive_all = ["YES", "NO"];
var single_selectbox = createSingleSelectBox("R1_C1_select", exclusive_all);
document.getElementById("id_R1_C1").appendChild(single_selectbox);
var h4 = createHeadingWithIcon("h6", "R1_C2", "id='k_out_N_tooltip'", "5px");
document.getElementById("id_R1_C2").appendChild(h4);
var inputNumBox = createInputNumberBox(
"id_R1_C2_input",
1,
1,
"number",
"input-xs w-50 h-50",
"2"
);
document.getElementById("id_R1_C2").appendChild(inputNumBox);
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-lg-4">
<div class="card pl-2 py-2">
<div class="card-block">
<div class="row pl-2">
<div class="col-md-7" id="id_R1_C1"></div>
<div class="col-md-5" id="id_R1_C2"></div>
</div>
</div>
</div>
</div>
Two obvious problems here:
You've linked to Bootstrap v3.3.5, but you're using Bootstrap v5 classes. In particular, the w-50 class wasn't available in v3.
You're specifying that the inputs should be 50% of the width of their parent. But the parents are different widths - one is seven columns (~58% of the container), and the other is five columns (~42% of the container).
If you're able to update to Bootstrap v5, then you can make your inputs the same size with:
/* create single select box */
function createSingleSelectBox(id, header_arr) {
var selectBox = document.createElement("select");
selectBox.setAttribute("id", id);
selectBox.multiple = false;
selectBox.className = "input-small w-50";
for (var i = 0; i < header_arr.length; i++) {
var op = new Option();
op.value = header_arr[i];
op.text = header_arr[i];
selectBox.options.add(op);
}
return selectBox;
}
/* create input number box */
function createInputNumberBox(id, min, step, type, my_class, default_val) {
var inputNumBox = document.createElement("input");
inputNumBox.id = id;
inputNumBox.className = my_class;
inputNumBox.type = type;
inputNumBox.step = step;
inputNumBox.min = min;
inputNumBox.value = default_val;
return inputNumBox;
}
/* create heading with icon*/
function createHeadingWithIcon(
head_type,
head_text,
icon_id,
bottom_margin_px
) {
var h = document.createElement(head_type);
h.innerHTML =
head_text +
" " +
"<i class='far fa-question-circle' " +
icon_id +
" style='color:grey'></i>";
// <i class="far fa-question-circle" id="go_tooltip" style="color:grey"></i>
h.style.marginBottom = bottom_margin_px;
return h;
}
//#######################################################################################################################
var h4 = createHeadingWithIcon("h6", "R1_C1", "id='exclusive_tooltip'", "5px");
document.getElementById("id_R1_C1").appendChild(h4);
var exclusive_all = ["YES", "NO"];
var single_selectbox = createSingleSelectBox("R1_C1_select", exclusive_all);
document.getElementById("id_R1_C1").appendChild(single_selectbox);
var h4 = createHeadingWithIcon("h6", "R1_C2", "id='k_out_N_tooltip'", "5px");
document.getElementById("id_R1_C2").appendChild(h4);
var inputNumBox = createInputNumberBox(
"id_R1_C2_input",
1,
1,
"number",
"input-xs w-50 h-50",
"2"
);
document.getElementById("id_R1_C2").appendChild(inputNumBox);
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-lg-4">
<div class="card pl-2 py-2">
<div class="card-block">
<div class="row pl-2">
<div class="col-md-6" id="id_R1_C1"></div>
<div class="col-md-6" id="id_R1_C2"></div>
</div>
</div>
</div>
</div>
NB: There are a lot of changes between v3 and v5. If you're working with an existing site, changing Bootstrap versions is not a trivial task.
My views:
class AddSuiteView(CreateView):
model = TestSuite
form_class = TestSuiteForm
def get_context_data(self, **kwargs):
context = super().get_context_data(**kwargs)
my_TestCase = TestCase.objects.all()
context['my_testcase'] = my_TestCase
return context
def get_success_url(self):
return reverse("integratedTest:testSuite")
My form.py:
class TestSuiteForm(forms.ModelForm):
class Meta:
model = TestSuite
fields = ( 'name', 'test_case_list', 'created_by' )
My model is:
class TestSuite(models.Model):
name = models.CharField(max_length=200)
test_case_list = models.CharField(max_length=200, validators=[validate_comma_separated_integer_list], default = "1")
created_by = models.CharField(max_length=200, default = "anyone")
create_datetime = models.DateTimeField("TestSuite created on", auto_now = True)
class TestCase(models.Model):
name = models.CharField(max_length=200)
.....
My html is a bit complex:
<form method="post">
{% csrf_token %}
<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
<h1 class="addsuite">Create Test Suite:</h1>
<p>
<label for="id_name">Name:</label>
<input type="text" id="id_name" name="name" required><br><br>
</p>
<p>
<label for="id_test_case_list_select_l">test_case_list(double click to add):</label><br><br>
<select size=10 name="test_case_list_select_l" id="id_test_case_list_select_l" class="multiselect" multiple="multiple" >
{%for case in my_testcase %}
<option value="{{case.name}}" >{{case.name}}</option>
{%endfor %}
</select>
<br><br>
<label for="id_test_case_list_select_r" >test case selected(double click to remove):</label><br>
<select size=10 name="test_case_list_select_r" id="id_test_case_list_select_r" class="multiselect" multiple="multiple" >
</select>
<input type="hidden" id="id_test_case_list" name="test_case_list" value="">
</p>
<p>⇧
<input type="button" id="addTestcaseByOne" value="++" onclick="addTestcaseByOne">
</p>
<p>⇩
<input type="button" id="decreaseTestcaseByOne" value="--" onclick="decreaseTestcaseByOne">
</p>
<br><br>
<p>
<label for="id_created_by">created_by:</label>
<input type="text" id="id_created_by" name="created_by" "><br><br>
</p>
<input type="submit" value="Save">
</form>
<script>
$(document).ready(function() {
$("#id_test_case_list_select_l").dblclick(function() {
var selectedItem = $('#id_test_case_list_select_l').find(":selected").text()
$('#id_test_case_list_select_r').append
('<option value= ' + selectedItem + '"*1">'+selectedItem+'*1</option>')
var old_val = $('#id_test_case_list').val()
//alert("old_val" + old_val)
var new_val = ""
if (old_val.length == 0){
new_val = selectedItem + "*1"
}
else{
new_val = old_val + "," + selectedItem + "*1"
}
//alert("new_val:" + new_val)
$('#id_test_case_list').val(new_val)
});
});
$(document).ready(function() {
$("#id_test_case_list_select_r").dblclick(function() {
select_str = $('#id_test_case_list_select_r').find(":selected").text()
//alert("select_str:"+select_str)
var textArry = select_str.split("*")
if( textArry.length == 2 ){
var rep = parseInt(textArry[1])
//alert("rep:"+rep)
if( rep==1 ){
var old_val = $('#id_test_case_list').val()
//alert("old_val:" + old_val)
var indexSel = $("#id_test_case_list_select_r").prop('selectedIndex')
//alert("indexSel:"+indexSel)
var textArry_oldlist = old_val.split(",")
var new_val = ""
for( let i = 0; i < textArry_oldlist.length; i++ ){
if(i == indexSel){
continue
}
else{
if (new_val.length == 0){
new_val = textArry_oldlist[i]
}else{
new_val = new_val + "," + textArry_oldlist[i]
}
}
//alert("new_val:" + new_val)
}
//alert("new_val:" + new_val)
$('#id_test_case_list').val(new_val)
$('#id_test_case_list_select_r').find(":selected").remove()
}
}
});
});
$(document).ready(function() {
$("#addTestcaseByOne").click(function() {
var optionLength = $('#id_test_case_list_select_r').find('option').length
if(optionLength>=1){
select_str = $('#id_test_case_list_select_r').find(":selected").text()
var textArry = select_str.split("*")
if( textArry.length == 2 ){
var rep = parseInt(textArry[1]) + 1
var new_text = textArry[0] + "*" + rep
$('#id_test_case_list_select_r').find(":selected").text(new_text)
var new_val = textArry[0] + "*" + rep
$('#id_test_case_list_select_r').find(":selected").val(new_val)
var indexSel = $("#id_test_case_list_select_r").prop('selectedIndex')
//alert("indexSel:"+indexSel)
var old_val = $('#id_test_case_list').val()
//alert("old_val:" + old_val)
var textArry_oldlist = old_val.split(",")
var new_val_list = ""
for( let i = 0; i < textArry_oldlist.length; i++ ){
if(i == indexSel){
if (new_val_list.length == 0){
new_val_list = new_val
}else{
new_val_list = new_val_list + "," + new_val
}
}
else{
if (new_val_list.length == 0){
new_val_list = textArry_oldlist[i]
}else{
new_val_list = new_val_list + "," + textArry_oldlist[i]
}
}
}
//alert("new_val_list:" + new_val_list)
$('#id_test_case_list').val(new_val_list)
}
}
});
});
$(document).ready(function() {
$("#decreaseTestcaseByOne").click(function() {
var optionLength = $('#id_test_case_list_select_r').find('option').length
if(optionLength>=1){
select_str = $('#id_test_case_list_select_r').find(":selected").text()
var selectedTextSpls = select_str.split("*")
if( selectedTextSpls.length == 2 ){
var rep = parseInt(selectedTextSpls[1])
if( rep>1 ){
rep = rep - 1
var new_text = selectedTextSpls[0] + "*" + rep
$('#id_test_case_list_select_r').find(":selected").text(new_text)
var new_val = selectedTextSpls[0] + "*" + rep
$('#id_test_case_list_select_r').find(":selected").val(new_val)
var indexSel = $("#id_test_case_list_select_r").prop('selectedIndex')
//alert("indexSel:"+indexSel)
var old_hidden_val = $('#id_test_case_list').val()
//alert("old_hidden_val:" + old_hidden_val)
var textArry_oldlist = old_hidden_val.split(",")
var new_val_list = ""
for( let i = 0; i < textArry_oldlist.length; i++ ){
if(i == indexSel){
if (new_val_list.length == 0){
new_val_list = new_val
}else{
new_val_list = new_val_list + "," + new_val
}
}
else{
if (new_val_list.length == 0){
new_val_list = textArry_oldlist[i]
}else{
new_val_list = new_val_list + "," + textArry_oldlist[i]
}
}
}
//alert("new_val_list:" + new_val_list)
$('#id_test_case_list').val(new_val_list)
}else if( rep==1 ){
var indexSel = $("#id_test_case_list_select_r").prop('selectedIndex')
//alert("indexSel:"+indexSel)
var old_hidden_val = $('#id_test_case_list').val()
//alert("old_hidden_val:" + old_hidden_val)
var textArry_oldlist = old_hidden_val.split(",")
var new_val_list = ""
for( let i = 0; i < textArry_oldlist.length; i++ ){
if(i == indexSel){
continue
}
else{
if (new_val_list.length == 0){
new_val_list = textArry_oldlist[i]
}else{
new_val_list = new_val_list + "," + textArry_oldlist[i]
}
}
}
//alert("new_val_list:" + new_val_list)
$('#id_test_case_list').val(new_val_list)
$('#id_test_case_list_select_r').find(":selected").remove()
}
}
}
});
});
</script>
Details: Upper list selection(name="test_case_list_select_l") is a full list. Double clicking options in upper list can add a same named one to the lower list(name="test_case_list_select_r") and the hidden input(name="test_case_list") get a new value. Hopefully, the hidden input will update the field test_case_list
The code seems good to me, but unfortunately it can't save. After input everything and click save the button, the page never redirect and model TestSuite have no new record. The selected list becomes empty immediately instead.
P.S. My form.html is coming from the Django tutorial:
<form method="post">
{% csrf_token %}
{{ form.as_p }}
<input type="submit" value="Save">
</form>
I add an additional button to test the value to be submitted.
<input type="submit" value="test" onclick="testButton()">
script as:
function testButton(){
valu = $('#id_test_case_list').val()
alert("valu:" + valu)
}
After select some cases, the first click button shows valu is the correct strings as I expected. But the selected list is cleared immediately after the button click. The repeatedly clicking of testButton also displays valu as blank.
I resolved this issue after I modified the model from test_case_list = models.CharField(max_length=200, validators=[validate_comma_separated_integer_list], default = "1")
to
test_case_list = models.CharField(max_length=200, default = "1")
by which I deleted the validators=[validate_comma_separated_integer_list].
I forgot it's not comma_separated_integer_list but comma_separated_string_list, I didn't know if there's any comma_separated_string_list
action="/your-name/" is missing in your form tag.
<form action="/your-route" method="post">
.
.
.
<button type="submit">Submit</button>
</form>
I have a code to search and display the exact field in any column.
I would like to get the code of partial search, such that the input value if we entre is partial, should display all the possible fields.
Eg. Search "Evaluation" in the search field should display all the possible results.
enter image description here
function doGet() {
return HtmlService.createTemplateFromFile('Index').evaluate();
}
/* PROCESS FORM */
function processForm(formObject){
var result = "";
if(formObject.searchtext){//Execute if form passes search text
result = search(formObject.searchtext);
}
return result;
}
//SEARCH FOR MATCHED CONTENTS
function search(searchtext){
var spreadsheetId = '1iG30kufq5MQpd0xmoPhPir5iA3hlz8s7vI_0EWQfg7Q'; //** CHANGE !!!
var dataRage = 'Data!A2:Y'; //** CHANGE !!!
var data = Sheets.Spreadsheets.Values.get(spreadsheetId, dataRage).values;
var ar = [];
data.forEach(function(f) {
if (~f.indexOf(searchtext)) {
ar.push(f);
}
});
return ar;
}
HTML CODE
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous"></script>
<!--##JAVASCRIPT FUNCTIONS ---------------------------------------------------- -->
<script>
//PREVENT FORMS FROM SUBMITTING / PREVENT DEFAULT BEHAVIOUR
function preventFormSubmit() {
var forms = document.querySelectorAll('form');
for (var i = 0; i < forms.length; i++) {
forms[i].addEventListener('submit', function(event) {
event.preventDefault();
});
}
}
window.addEventListener("load", preventFormSubmit, true);
//HANDLE FORM SUBMISSION
function handleFormSubmit(formObject) {
google.script.run.withSuccessHandler(createTable).processForm(formObject);
document.getElementById("search-form").reset();
}
//CREATE THE DATA TABLE
function createTable(dataArray) {
if(dataArray && dataArray !== undefined && dataArray.length != 0){
var result = "<table class='table table-sm table-striped' id='dtable' style='font-size:0.8em'>"+
"<thead style='white-space: nowrap'>"+
"<tr>"+ //Change table headings to match witht he Google Sheet
"<th scope='col'>MS No</th>"+
"<th scope='col'>Title</th>"+
"<th scope='col'>Status</th>"+
"<th scope='col'>Date</th>"+
"</tr>"+
"</thead>";
for(var i=0; i<dataArray.length; i++) {
result += "<tr>";
for(var j=0; j<dataArray[i].length; j++){
result += "<td>"+dataArray[i][j]+"</td>";
}
result += "</tr>";
}
result += "</table>";
var div = document.getElementById('search-results');
div.innerHTML = result;
}else{
var div = document.getElementById('search-results');
//div.empty()
div.innerHTML = "Data not found!";
}
}
</script>
<!--##JAVASCRIPT FUNCTIONS ~ END ---------------------------------------------------- -->
</head>
<body>
<div class="container">
<br>
<div class="row">
<div class="col">
<!-- ## SEARCH FORM ------------------------------------------------ -->
<form id="search-form" class="form-inline" onsubmit="handleFormSubmit(this)">
<div class="form-group mb-2">
<label for="searchtext">Search MS No</label>
</div>
<div class="form-group mx-sm-3 mb-2">
<input type="text" class="form-control" id="searchtext" name="searchtext" placeholder="Enter MS No">
</div>
<button type="submit" class="btn btn-primary mb-2">Search</button>
</form>
<!-- ## SEARCH FORM ~ END ------------------------------------------- -->
</div>
</div>
<div class="row">
<div class="col">
<!-- ## TABLE OF SEARCH RESULTS ------------------------------------------------ -->
<div id="search-results" class="table-responsive">
<!-- The Data Table is inserted here by JavaScript -->
</div>
<!-- ## TABLE OF SEARCH RESULTS ~ END ------------------------------------------------ -->
</div>
</div>
</div>
<div class="container">
<br>
<div class="row">
<div class="col">
<!-- ## SEARCH FORM ------------------------------------------------ -->
<form id="search-form" class="form-inline" onsubmit="handleFormSubmit(this)">
<div class="form-group mb-2">
<label for="searchtext">Search Title</label>
</div>
<div class="form-group mx-sm-3 mb-2">
<input type="text" class="form-control" id="searchtext" name="searchtext" placeholder="Enter Title">
</div>
<button type="submit" class="btn btn-primary mb-2">Search</button>
</form>
<!-- ## SEARCH FORM ~ END ------------------------------------------- -->
</div>
</div>
<div class="row">
<div class="col">
<!-- ## TABLE OF SEARCH RESULTS ------------------------------------------------ -->
<div id="search-results" class="table-responsive">
<!-- The Data Table is inserted here by JavaScript -->
</div>
<!-- ## TABLE OF SEARCH RESULTS ~ END ------------------------------------------------ -->
</div>
</div>
</div>
</body>
</html>
This will highlight partial substring matches in red:
function searchhilight() {
let hilite = SpreadsheetApp.newTextStyle().setBold(true).setForegroundColor('red').build();
let normal = SpreadsheetApp.newTextStyle().setBold(false).setForegroundColor('black').build();
const ui = SpreadsheetApp.getUi();
const ss = SpreadsheetApp.getActive();
const sh = ss.getSheetByName('Sheet0');
const sr = 2;//data start row
const rg = sh.getRange(sr, 1, sh.getLastRow() - sr + 1, sh.getLastColumn());
rg.setFontColor('black').setFontWeight('normal');//set all data to black text with no bold
const dvs = rg.getDisplayValues();
const resp = ui.prompt('Search Text', 'Enter Search String', ui.ButtonSet.OK_CANCEL);
if (resp.getSelectedButton() == ui.Button.OK) {
const st = resp.getResponseText();
dvs.forEach((r, i) => {
r.forEach((c, j) => {
let idx = '';
fidx = '';//from index
iA = [];//index array of matches
do {
idx = c.indexOf(st, fidx);
if (~idx) {
fidx = idx + st.length;
iA.push({ idxs: idx, idxe: idx + st.length })
}
} while (~idx);
let rtv = SpreadsheetApp.newRichTextValue().setText(c);
iA.forEach(obj => rtv.setTextStyle(obj.idxs, obj.idxe, hilite));
sh.getRange(i + sr, j + 1).setNumberFormat('#STRING#');
sh.getRange(i + sr, j + 1).setRichTextValue(rtv.build());
});
});
}
}
This function will also reformat every cell in the data range to plain text.
RichTextValueBuilder
RichTextValue
function search(searchtext){
var spreadsheetId = '1do6G8pScBAz0Z7GOCjbBcXPKJkhbOwlSx5BZyt6S7H8'; //** CHANGE !!!
var dataRage = 'Data!A2:Y'; //** CHANGE !!!
var data = Sheets.Spreadsheets.Values.get(spreadsheetId, dataRage).values;
var ar = [];
data.forEach(function(f) {
if (~f.toString().toLowerCase().indexOf(searchtext.toString().toLowerCase())) {
ar.push(f);
}
});
return ar;
}
how can I show the time part only from the current datetime in html under div tag. I called the function but not calling the javascript function
#section Scripts{
<script type="text/javascript">
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('txt').innerHTML =
h + ":" + m + ":" + s;
var t = setTimeout(startTime, 500);
}
function checkTime(i) {
if (i < 10) { i = "0" + i }; // add zero in front of numbers < 10
return i;
}
</script>
}
<div class="row">
<div class="col-md-2">
<h2><b>Place</b></h2>
<div>startTime()</div>
</div>
</div>
Maybe you forget to set id="txt" to the div, and don’t forget to write onload="startTime()" in the <body> ,so that the javascript can be called.
and the following is my demo,hope it can help:
View:
<body onload="startTime()">
<div class="row">
<div class="col-md-2">
<h2><b>Place</b></h2>
<div id="txt">
</div>
</div>
</div>
</body>
#section Scripts{
<script type="text/javascript">
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('txt').innerHTML =
h + ":" + m + ":" + s;
var t = setTimeout(startTime, 500);
}
function checkTime(i) {
if (i < 10) { i = "0" + i }; // add zero in front of numbers < 10
return i;
}
</script>
}
Result: