Anjularjss ng-options not working select

Anjularjss ng-options not working select - javascript

I am trying to populate a select with some numbers using ng-options.This is my code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<style>
p{
margin-top: 50px;
height:700px;
width: 1400px;
font-size:17px;
}
</style>
<script src="jscolor.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="editor">
<label for="kys_font_size"> font size:</label>
<select ng-model="kys_selected_font" id="fontsize" name="kys_font_size" ng-options="page for page in FontSize(1, 150)" ng-change="changeFont()">
Color: <input type="color" ng-model="ColorPicked">
</select>
<p contenteditable="true" id="content" >
</p>
</div>
<script>
var app = angular.module('myApp',[]);
app.controller('editor',function($scope){
$scope.color = "black";
$scope.selectedText = "";
$scope.FontSize = function(start, end) {
var size = [];
for (var i = start; i <= end; i++) {
size.push(i);
}
return size;
};
$scope.changeFont = function(){
var newSpan = "<span id='one' style='font-size:'"+$scope.kys_selected_font+"'> </span>"
$("#one").focus();
$("#content").append();
var spans = document.getElementsByTagName('span');
if($scope.selectedText!=""){
for( i=0;i < spans.length;i++){
for( j=0;j < selectedText.length;j++){
var id = spans[i].id;
var selectedId = $scope.selectedText[j].id;
var text = $("#"+id).clone().children().remove().end().text();
var fontSize = $("#"+id).css("font-size");
var selectedinnerText = $("#"+selectedId).clone().children().remove().end().text();;
if(fontSize == $scope.)
if(id === selectedId){
if(text === selectedinnerText){
if(fontSize == $scope.kys_selected_font){
}
else{
$("#"+id).css("font-size",10+"px");
}
}
else{
var replacer = document.getElementById(id);
var newElement = "<span style='font-size:10px;' id='one4'>"+selectedinnerText+"</span>";
replacer.innerHTML = replacer.innerHTML.replace(selectedinnerText,newElement);
}
}
}
}
}
};
$("span").mouseup(function(){
var range = window.getSelection().getRangeAt(0);
content = range.cloneContents();
var select = content.querySelectorAll('span');
$scope.selectedText = select;
});
});
</script>
</body>
</html>
Select is always empty.

You haven't closed your controller. Add }); after your $scope.changeFont function.
Also, please format your code before posting a question. It's a nightmare to read for people trying to help you and it can help find issues like this.
EDIT
In your $scope.changeFont function you have this line if(fontSize == $scope.). I presume you want it to be if(fontSize == $scope.FontSize). I have changed it in the snippet below and the <select> is populated. Whether or not $scope.changeFont works as you intend, I don't know and it is outside of the scope of this question.
Additionally, in your HTML you have a <input> within a <select> which you need to move.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<style>
p {
margin-top: 50px;
height: 700px;
width: 1400px;
font-size: 17px;
}
</style>
<!--<script src="jscolor.js"></script>-->
</head>
<body>
<div ng-app="myApp" ng-controller="editor">
<label for="kys_font_size">font size:</label>
<select ng-model="kys_selected_font" id="fontsize" name="kys_font_size" ng-options="page for page in FontSize(1, 150)" ng-change="changeFont()">
</select>
Color: <input type="color" ng-model="ColorPicked">
</div>
<script>
var app = angular.module('myApp', []);
app.controller('editor', function($scope) {
$scope.color = "black";
$scope.selectedText = "";
$scope.FontSize = function(start, end) {
var size = [];
for (var i = start; i <= end; i++) {
size.push(i);
}
return size;
};
$scope.changeFont = function() {
var newSpan = "<span id='one' style='font-size:'" + $scope.kys_selected_font + "'> </span>"
$("#one").focus();
$("#content").append();
var spans = document.getElementsByTagName('span');
if ($scope.selectedText != "") {
for (i = 0; i < spans.length; i++) {
for (j = 0; j < selectedText.length; j++) {
var id = spans[i].id;
var selectedId = $scope.selectedText[j].id;
var text = $("#" + id).clone().children().remove().end().text();
var fontSize = $("#" + id).css("font-size");
var selectedinnerText = $("#" + selectedId).clone().children().remove().end().text();;
if (fontSize == $scope.FontSize)
if (id === selectedId) {
if (text === selectedinnerText) {
if (fontSize == $scope.kys_selected_font) {
} else {
$("#" + id).css("font-size", 10 + "px");
}
} else {
var replacer = document.getElementById(id);
var newElement = "<span style='font-size:10px;' id='one4'>" + selectedinnerText + "</span>";
replacer.innerHTML = replacer.innerHTML.replace(selectedinnerText, newElement);
}
}
}
}
}
};
$("span").mouseup(function() {
var range = window.getSelection().getRangeAt(0);
content = range.cloneContents();
var select = content.querySelectorAll('span');
$scope.selectedText = select;
});
});
</script>
</body>
</html>

Related

Why won't my select appear with an option when created with JS?

function showProperties() {
const forButton = document.createElement('select');
forButton.setAttribute('type', 'text')
toolresult.appendChild(forButton)
const option = document.createElement('option');
option.setAttribute('value', 'Arial')
forButton.appendChild(option)
}
This doesn't seem to create the dropdown, even though I created a option element that was appended inside the select, there is no option for Arial.
const sheets = document.getElementById('sheets');
const siteDocument = document.getElementsByTagName('body')[0];
const popup = document.getElementById('popup');
const buttons = document.getElementById('buttons');
const toolresult = document.getElementById('toolresult');
const item = document.getElementById('item');
// const sheets = document.getElementById('sheets');
/* Popup */
const myStuff = prompt('Enter \'columns, rows\' NOTE: 5,20 is recommended on computer, refer to documentation.');
if (myStuff !== '' || myStuff.includes(',') === true) {
const myStuffArr = myStuff.split(',');
console.log(myStuffArr);
window.amountOfColumns = myStuffArr[0];
window.amountOfRows = myStuffArr[1];
} else {
window.amountOfColumns = 5;
window.amountOfRows = 20;
}
/* Functions */
const itemVisible = document.getElementById('itemVisible');
function changeItem(test) {
itemVisible.value = test.slice(test.indexOf('t') + 1, test.length);
}
function showProperties() {
const forButton = document.createElement('select');
forButton.setAttribute('type', 'text')
toolresult.appendChild(forButton)
const option = document.createElement('option');
option.setAttribute('value', 'Arial')
forButton.appendChild(option)
}
var counter = 0;
for (var x = 0; x < window.amountOfRows; x++) {
for (var i = 0; i < window.amountOfColumns; i++) {
const myNewElement = document.createElement('input');
myNewElement.width = siteDocument
myNewElement.style.fontSize = '2vh';
counter++
myNewElement.setAttribute('id', 'myNewElement' + counter)
console.log(myNewElement.id);
myNewElement.addEventListener("focus", function doFunctionStuff() {
changeItem(myNewElement.id)
});
sheets.appendChild(myNewElement)
document.getElementById("sheets").style.gridTemplateColumns = "repeat(" + window.amountOfColumns +", 1fr)";
}
}
var inputs = document.getElementsByTagName("input");
for (var z = 0; z < inputs.length; z++) {
inputs[z].style.height = "calc((50vh/" +window.amountOfRows +") - 3px)";
//inputs[z].style.maxHeight = "calc((80vh/20) - 100px)";
}
/* Fix Issues OR Bugs */
const submitFormula = document.getElementById('submitFormula');
submitFormula.style.fontSize = '1vw';
submitFormula.style.width = '8em';
submitFormula.style.height = '1.5em';
/* Stuff Extra */
/*
/* /* Download Excel File
var A = [['n','sqrt(n)']];
for(var j=1; j<10; ++j){
A.push([j, Math.sqrt(j)]);
}
var csvRows = [];
for(var i=0, l=A.length; i<l; ++i){
csvRows.push(A[i].join(','));
}
var csvString = csvRows.join("%0A");
var a = document.createElement('a');
a.href = 'data:attachment/csv,' + encodeURIComponent(csvString);
a.target = '_blank';
a.download = 'myFile.csv';
document.body.appendChild(a);
a.click();
*/
#titletext {
font-size: 5vh;
}
#sheets {
display: grid;
max-height: 100vh;
}
input {
min-width: 0px;
min-height: 0px;
text-align: center;
}
#buttons > button {
width: 20vw;
height: 4vh;
font-size: 2vh;
}
#itemVisible {
width: 8vw;
}
#enterFormula {
width: 8vw;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="popup"></div>
<h1 id="titletext">Excel Sheets</h1>
<div id="buttons">
<button id="" onclick="">File</button>
<button id="" onclick="">Insert</button>
<button id="" onclick="">Page Layout</button>
<button id="" onclick="">Formulas</button>
<button id="" onclick="">Review</button>
<button id="" onclick="showProperties()">Properties</button>
<button id="" onclick="">Developer</button>
<button id="" onclick="">Help</button>
</div> <br>
<div id="toolresult"></div>
<div id="item">
<input id="itemVisible" disabled></input>
<input id="enterFormula"></input>
<input type="submit" id="submitFormula"></input>
</div>
<div id="sheets" onchange="getItem()"></div>
<script src="script.js"></script>
</body>
</html>
Snippet if you need it.

Try below. I have changed the line document.getElementById('toolresult').appendChild(forButton) and how you add value amd html to the option.
function showProperties() {
const forButton = document.createElement('select');
document.getElementById('toolresult').appendChild(forButton)
const option = document.createElement('option');
option.value = 'Arial';
option.innerHTML = 'Arial';
forButton.appendChild(option)
}
full code below
const sheets = document.getElementById('sheets');
const siteDocument = document.getElementsByTagName('body')[0];
const popup = document.getElementById('popup');
const buttons = document.getElementById('buttons');
const toolresult = document.getElementById('toolresult');
const item = document.getElementById('item');
// const sheets = document.getElementById('sheets');
/* Popup */
const myStuff = prompt('Enter \'columns, rows\' NOTE: 5,20 is recommended on computer, refer to documentation.');
if (myStuff !== '' || myStuff.includes(',') === true) {
const myStuffArr = myStuff.split(',');
console.log(myStuffArr);
window.amountOfColumns = myStuffArr[0];
window.amountOfRows = myStuffArr[1];
} else {
window.amountOfColumns = 5;
window.amountOfRows = 20;
}
/* Functions */
const itemVisible = document.getElementById('itemVisible');
function changeItem(test) {
itemVisible.value = test.slice(test.indexOf('t') + 1, test.length);
}
function showProperties() {
const forButton = document.createElement('select');
document.getElementById('toolresult').appendChild(forButton)
const option = document.createElement('option');
option.value = 'Arial';
option.innerHTML = 'Arial';
forButton.appendChild(option)
}
var counter = 0;
for (var x = 0; x < window.amountOfRows; x++) {
for (var i = 0; i < window.amountOfColumns; i++) {
const myNewElement = document.createElement('input');
myNewElement.width = siteDocument
myNewElement.style.fontSize = '2vh';
counter++
myNewElement.setAttribute('id', 'myNewElement' + counter)
console.log(myNewElement.id);
myNewElement.addEventListener("focus", function doFunctionStuff() {
changeItem(myNewElement.id)
});
sheets.appendChild(myNewElement)
document.getElementById("sheets").style.gridTemplateColumns = "repeat(" + window.amountOfColumns +", 1fr)";
}
}
var inputs = document.getElementsByTagName("input");
for (var z = 0; z < inputs.length; z++) {
inputs[z].style.height = "calc((50vh/" +window.amountOfRows +") - 3px)";
//inputs[z].style.maxHeight = "calc((80vh/20) - 100px)";
}
/* Fix Issues OR Bugs */
const submitFormula = document.getElementById('submitFormula');
submitFormula.style.fontSize = '1vw';
submitFormula.style.width = '8em';
submitFormula.style.height = '1.5em';
/* Stuff Extra */
/*
/* /* Download Excel File
var A = [['n','sqrt(n)']];
for(var j=1; j<10; ++j){
A.push([j, Math.sqrt(j)]);
}
var csvRows = [];
for(var i=0, l=A.length; i<l; ++i){
csvRows.push(A[i].join(','));
}
var csvString = csvRows.join("%0A");
var a = document.createElement('a');
a.href = 'data:attachment/csv,' + encodeURIComponent(csvString);
a.target = '_blank';
a.download = 'myFile.csv';
document.body.appendChild(a);
a.click();
*/
#titletext {
font-size: 5vh;
}
#sheets {
display: grid;
max-height: 100vh;
}
input {
min-width: 0px;
min-height: 0px;
text-align: center;
}
#buttons > button {
width: 20vw;
height: 4vh;
font-size: 2vh;
}
#itemVisible {
width: 8vw;
}
#enterFormula {
width: 8vw;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="popup"></div>
<h1 id="titletext">Excel Sheets</h1>
<div id="buttons">
<button id="" onclick="">File</button>
<button id="" onclick="">Insert</button>
<button id="" onclick="">Page Layout</button>
<button id="" onclick="">Formulas</button>
<button id="" onclick="">Review</button>
<button id="" onclick="showProperties()">Properties</button>
<button id="" onclick="">Developer</button>
<button id="" onclick="">Help</button>
</div> <br>
<div id="toolresult"></div>
<div id="item">
<input id="itemVisible" disabled></input>
<input id="enterFormula"></input>
<input type="submit" id="submitFormula"></input>
</div>
<div id="sheets" onchange="getItem()"></div>
<script src="script.js"></script>
</body>
</html>

Why with "array[row][col]= usedspace;" cannot increase specific columns and rows depending on the increse each variable (row or column)?

I am Michael and I am new to this forum.
What I want to ask is how through Java Script to make a character 'O' follow your character 'X' in a '.' that is a 20*20 array, but where 'X' pass '.' is replaced with 'O'.
E.g. increase some way the counters inside the if statement that relies in the for loops of row and column of "array a" ?
function start()
{
document.getElementById("wrapper").style="visibility:hidden";
var optionOne = document.getElementById("optionOne");
var display = "";
var txt1 = document.getElementById("txt1");
var mtxt1 = parseInt(txt1.value);
if (mtxt1 == 1)
{
display += "<p>Pen is currently NOT DRAWING</p>";
document.getElementById("wrapper").style="visibility:display";
}
else if (mtxt1 == 2)
{
display += "<p>Pen is DRAWING</p>";
document.getElementById("wrapper").style="visibility:display";
}
optionOne.innerHTML = display;
var button = document.getElementById("getbutton");
button.addEventListener("click",start,false );
//var displaygmb = document.getElementById("displaygmb");
//displaygmb.addEventListener("click", displaygameboard("Gameboard",array,length,arraydisplay),false );
var button2 = document.getElementById("get2button");
button2.addEventListener("click",option2(button2,mtxt1),false );
}
function option2(buttonn,symbolinput)
{
var input = symbolinput;
var usedspace = "O";
var turtle = "X";
var gameboardSymbol = ".";
var clickcountt = buttonn;
var count6 = 1;
var count5 = 1;
var count3 = 1;
var count4 = 1;
var display = "";
clickcountt.onclick = function() {
var optiontwo = document.getElementById("optiontwo");
var display2 = "";
var txt2 = document.getElementById("txt2");
var mtxt2 = parseInt(txt2.value);
if (mtxt2 == 6)
{
count6 += 1;
display2 += "<p>Turtle is moving "+count6+" places down</p>";
}
else if (mtxt2 == 5)
{
count6 -=1;
count5 +=1;
display2 += "<p>Turtle is moving "+count6+" places up</p>";
}
else if (mtxt2 == 3)
{
count3 += 1;
display2 += "<p>Turtle is moving "+count3+" places to the right</p>";
}
else if (mtxt2 == 4)
{
count3 -=1
count4 += 1;
display2 += "<p>Turtle is moving "+count3+" places to the left</p>";
}
optiontwo.innerHTML = display2;
var gameboardsize = 20;
var arraydisplay = document.getElementById("arraydisplay");
var array = new Array (gameboardsize);
var length = array.length;
for (var i = 0; i <= length; i++ )
{
array[i] = new Array(gameboardsize);
}
var arraydisplay = document.getElementById("arraydisplay");
var displaygbd = "<table id=gameb align=center><thead><th>"+"Gameboard"+"</th></thead><tbody>";
for (var row = 1; row <= length; row++)
{
//three += 1;
displaygbd += "<tr>";
for (var col = 1; col <= length; col++)
{
if (input == 1){
//four += 1;
if (((row ==count6)&&(col ==count3)))
{
array[row][col]= turtle;
}
else {
array[row][col]=gameboardSymbol;
}
}
//----------------------------
else if(input == 2)
{
if (((row == count6)&&(col ==count3)))
{
array[row][col]= turtle;
}
/*how to make 'O' follow 'X' by ibncrease the appropriate counter in the if below?*/
else if (((row <= count6)&&(col <=count3)))
{
array[row][col]= usedspace;
}
else if ((((row >= count6)||(col >= count3))))
{
array[row][col]=gameboardSymbol;
}
}//end else if
//----------------------------
displaygbd += "<th>"+array[row][col]+"\xa0"+"</th>";
}
displaygbd += "</tr>";
}
displaygbd += "</tbody></table>";
arraydisplay.innerHTML = displaygbd;
}//end clickout function
}
window.addEventListener("load",start,false);
#charset "ISO-8859-1";
#customers {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 30%;
}
#customers td, #customers th {
border: 1px solid #ddd;
padding: 8px;
}
#customers thead th {
padding-top: 12px;
padding-bottom: 12px;
text-align: center;
background-color: #4CAF50;
color: white;
}
#customers tbody th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: white;
color: black;
text-align:center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Initializing an array</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src ="tutle.js"></script>
</head>
<body>
select your first option
<input id ="txt1" type="text">
<input id = "getbutton" type ="button" value = "your option">
<div id = "optionOne"></div>
<br/>
<div id = "arraydisplay"></div>
<div id="wrapper" >
select your second option
<input id ="txt2" type="text">
<input id = "get2button" type ="button" value = "your option">
<div id = "optiontwo"></div>
</div>
<div id = "counters"></div>
<div id = "optionthree"></div>
</body>
</html>

Sharing a possible solution.
This should get you more than started.
Try running this here itself and let me know if this is ok. I'll add an explanation if required.
The 2 inputs receive the new location of 'X'. text1 receives row number and text2 receives column number. On button press, the corresponding dimension is updated.
var button1 = document.getElementById('getbutton');
var button2 = document.getElementById('get2button');
var textbox1 = document.getElementById('txt1');
var textbox2 = document.getElementById('txt2');
var gridX = 20;//table size length wise
var gridY = 20;//table size width wise
var arrayContainer = document.getElementById('arraydisplay');
var currentX = 1;//initial positions
var currentY = 1;
function init() {
var myTable = document.createElement('table');
myTable.setAttribute("id", "customers");
arrayContainer.appendChild(myTable);
//Creating initial grid
for(var i=0; i<gridX; i++) {
var row = document.createElement('tr');
for(var j=0; j<gridY; j++) {
var text = document.createTextNode('.');
var column = document.createElement('td');
column.appendChild(text);
row.appendChild(column);
}
myTable.appendChild(row);
}
//Setting initial value
document.getElementsByTagName('tr')[currentX-1].getElementsByTagName('td')[currentY-1].innerText = 'X';
}
init();
button1.onclick = clicked;
function clicked() {//1st position changed
var newX = parseInt(textbox1.value);
var newY = parseInt(textbox2.value);
moveTo(newX, newY);
}
button2.onclick = clicked;
function moveTo(newX, newY) {
//Setting old value to 'O'
var char = 'O'
if(newX == 1)
char = '.';
document.getElementsByTagName('tr')[currentX-1].getElementsByTagName('td')[currentY-1].innerText = char;
//Setting new location with 'X'
document.getElementsByTagName('tr')[newX-1].getElementsByTagName('td')[newY-1].innerText = 'X';
//Updating current location of 'X' for future use.
currentX = newX;
currentY = newY;
}
#charset "ISO-8859-1";
#customers {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 30%;
}
#customers td, #customers th {
border: 1px solid #ddd;
padding: 8px;
}
#customers thead th {
padding-top: 12px;
padding-bottom: 12px;
text-align: center;
background-color: #4CAF50;
color: white;
}
#customers tbody th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: white;
color: black;
text-align:center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Initializing an array</title>
<link rel="stylesheet" type="text/css" href="style.css">
<!-- <script src ="turtle.js"></script> -->
</head>
<body>
select your first option
<input id ="txt1" type="text">
<input id = "getbutton" type ="button" value = "your option">
<div id = "optionOne"></div>
<div id="wrapper" >
select your second option
<input id ="txt2" type="text">
<input id = "get2button" type ="button" value = "your option">
<div id = "optiontwo"></div>
</div>
<div id = "counters"></div>
<div id = "optionthree"></div>
<br>
<div id = "arraydisplay"></div>
</body>
<script src ="turtle.js"></script>
</html>

Unable to recreate elements by sessionStorage keys

My JS uses a sessionStorage to set keys and attempts to use these keys to recreate some accordions. I have no problem creating the elements via mouseclick, and I can store the keys and value in sessionStorage.
However, when I try to use a loop to find these keys, it doesn't appear to ever initialize. The remaining elements can be created via click, but the elements created before the refresh never load.
Project4values.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Project4</title>
<style type="text/css"></style>
<link href="Project4Values.css" rel="stylesheet" type="text/css">
<script type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type = "text/javascript" src = "Project4Values.js"></script>
</head>
<body id = "sixTypes">
<script>
jQuery(function($){
$(document).ready(function(e) {
$('#MenuBar').load('ProjectMenuBar.html');
});
});
</script>
<div id = "MenuBar"> </div>
<h1 class="h1center"> Values </h1>
<input type="button" id = "ClickCount" onClick="numberSection()" value="Click Here">
<p/>
</body>
</html>
Project4Values.css
#charset "utf-8";
/* CSS Document */
.h1center{
text-align:center;
}
input.accordian{
background-color: #501214;
padding: 18px;
width: 100%;
text-align: left;
color: white;
transition: 0.4s;
}
div.panel{
display: none;
}
div.panel.show{
display: block;
}
Prject4Values.js
function numberSection() {
"use strict";
var paraStr = ["Numbers", "Strings", "Booleans", "Functions", "Objects", "Undefined Values"];
var buttonClass = "accordian";
var divClass = "panel";
var button = document.createElement("input");
if (typeof (Storage) !== "undefined") {
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
sessionStorage.clickcount = 1;
}
}
//check for the first key made, then loop through and recreate the elements when the page loads
if (sessionStorage.getItem("containerNumber") !== null) {
window.onload = function () {
var x;
for (x = 0; x < sessionStorage.clickcount || x < 6; x++) {
button.className = buttonClass;
button.type = "button";
button.value = paraStr[x];
alert(button.value);
document.getElementById("sixTypes").appendChild(button);
createAccordian(document.getElementById("sixTypes"), divClass, button.value);
toggleText(buttonClass);
}
};
}
//while there are strings in the array, assign that string to button value
if (sessionStorage.clickcount - 1 < paraStr.length) {
button.className = buttonClass;
button.type = "button";
button.value = paraStr[sessionStorage.clickcount - 1];
document.getElementById("sixTypes").appendChild(button);
createAccordian(document.getElementById("sixTypes"), divClass, button.value);
toggleText(buttonClass);
}
}
function createAccordian(parentElement, strName, strStore) {
"use strict";
var accordian = document.createElement("div");
accordian.className = strName;
buildCellContent(accordian);
parentElement.appendChild(accordian);
sessionStorage.setItem("container" + strStore, strStore); //sets the Item in storage that I want to call later.
return parentElement;
}
function buildCellContent(parentElement) {
"use strict";
var x = sessionStorage.clickcount - 1;
var numText = "This text will go in the numbers section";
var strText = "This text will go in the strings section";
var boolText = "This text will go in the boolean section";
var funText = "This text will go in the function section";
var objText = "This text will go in the objects section";
var undefText = "This text will go in the undefinded section";
var textBlock = [numText, strText, boolText, funText, objText, undefText];
var textNode = document.createTextNode(textBlock[x]);
var pText = document.createElement("P");
pText.appendChild(textNode);
parentElement.appendChild(pText);
return parentElement;
}
function toggleText(cName) {
"use strict";
var acc = document.getElementsByClassName(cName);
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function () {
this.nextElementSibling.classList.toggle("show");
};
}
}

Setting 'font-size' with jQuery not working on last element of the selected Text

I am trying to change the font-size of all the selected text. It works fine but I am not able to change the font of last element in the array.
Below is my code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
$(document).ready(function(){
$('span').mouseup(function(){
var range = window.getSelection().getRangeAt(0);
content = range.cloneContents();
var select = content.querySelectorAll('span');
updateFont(select);
});
});
function updateFont(selectedText){
var spans = document.getElementsByTagName('span');
for( i=0;i < spans.length;i++){
for( j=0;j < selectedText.length;j++){
var id = spans[i].id;
var selectedId = selectedText[j].id;
var text = spans[i].innerHTML;
var selectedinnerText = selectedText[j].innerHTML;
if(i === spans.length-1)
{
checkLast(id,text,selectedText);
}
if(id === selectedId){
if(text === selectedinnerText){
$("#"+id).css("font-size",10+"px");
}
}
}
}
}
function checkLast(id,text,selectedText) {
for( j=0;j < selectedText.length;j++){
var selectedId = selectedText[j].id;
var selectedinnerText = selectedText[j].innerHTML;
alert(id + " " + selectedId + " " + selectedinnerText + " " + text);
if(id === selectedId){
if(text === selectedinnerText){
$("#"+id).css("font-size",10+"px");
}
}
}
}
</script>
</head>
<body>
<span style="font-size:40px" id="one1">Hi tTheee</span> <span style="font-size:20px" id="one2">hello</span> <span style="font-size:20px" id="one3">sdsds </span>
<p></p>
</body>
</html>

it's because your last element has a space at the end of it.
Change: if(text === selectedinnerText){
To:
if(text.trim() === selectedinnerText.trim()){ //eliminate spaces before and after the text, incase the highlighting goes over the element.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
$(document).ready(function(){
$('span').mouseup(function(){
var range = window.getSelection().getRangeAt(0);
content = range.cloneContents();
var select = content.querySelectorAll('span');
updateFont(select);
});
});
function updateFont(selectedText){
var spans = document.getElementsByTagName('span');
for( i=0;i < spans.length;i++){
for( j=0;j < selectedText.length;j++){
var id = spans[i].id;
var selectedId = selectedText[j].id;
var text = spans[i].innerHTML;
var selectedinnerText = selectedText[j].innerHTML;
if(i === spans.length-1)
{
checkLast(id,text,selectedText);
}
if(id === selectedId){
if(text.trim() === selectedinnerText.trim()){
$("#"+id).css("font-size",10+"px");
}
}
}
}
}
function checkLast(id,text,selectedText) {
for( j=0;j < selectedText.length;j++){
var selectedId = selectedText[j].id;
var selectedinnerText = selectedText[j].innerHTML;
alert(id + " " + selectedId + " " + selectedinnerText + " " + text);
if(id === selectedId){
if(text.trim() === selectedinnerText.trim()){
$("#"+id).css("font-size",10+"px");
}
}
}
}
</script>
</head>
<body>
<span style="font-size:40px" id="one1">Hi tTheee</span> <span style="font-size:20px" id="one2">hello</span> <span style="font-size:20px" id="one3">sdsds </span>
<p></p>
</body>
</html>

how to remove an object by button?

i built two buttons with this values("+" and "-")
when i click on "+" it creates a text and combo box,
i wanna know how to remove them with "-" button?(by only JavaScript)
here's the code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>create and delete</title>
<script type="text/javascript">
/*this function creates text box and combo box*/
function cre()
{var t=document.createElement('select');
var form=document.getElementById('theForm');
var label = document.createElement('label');
var textbox = document.createElement('input');
form.appendChild(t);
form.appendChild(textbox);}
function del()
/*{delete t,form,label,textbox;}*/
</script>
</head>
<body>
<form id='theForm'>
<input type="button" value="+" onclick="cre()" />
<input type="button" value="-" onclick="del()" />
</form>
</body>
</html>

function del()
{
var form=document.getElementById('theForm');
var t = form.getElementsByTagName('select');
var textbox = form.getElementsByTagName('input');
if(t != 'undefined' && textbox != 'undefined')
{
form.removeChild(t[t.length-1]);
form.removeChild(textbox[textbox.length-1]);
}
}
Fiddle for your reference

My solution :
cre = function() {
var form = document.getElementById('theForm'),
div = document.createElement('div'),
t = document.createElement('select'),
label = document.createElement('label'),
textbox = document.createElement('input');
div.className = 'divContainer';
div.appendChild(t);
div.appendChild(label);
div.appendChild(textbox);
form.appendChild(div);
}
/*{delete t,form,label,textbox;}*/
delForm = function() {
var form = document.getElementById('theForm');
form.parentNode.removeChild(form);
}
del = function() {
var containers = document.getElementsByClassName('divContainer');
for(var i = 0; i < containers.length; i++) {
if(typeof(containers[i]) === 'object') {
containers[i].parentNode.removeChild(containers[i]);
}
}
}
JSFiddle : http://jsfiddle.net/j6Fxc/27/

We Keep Coding

JavaScript is the programming language of the Web.

Anjularjss ng-options not working select - javascript

Related

Why won't my select appear with an option when created with JS?

Why with "array[row][col]= usedspace;" cannot increase specific columns and rows depending on the increse each variable (row or column)?

Unable to recreate elements by sessionStorage keys

Setting 'font-size' with jQuery not working on last element of the selected Text

how to remove an object by button?

Categories

Resources