Question has been answered
I'm trying to make a small word game,
and I already encountered a small problem I couldn't figure out.
HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>Word Game</title>
<!-- CSS -->
<link rel="stylesheet" type="StyleSheet" href="style.css" />
<!-- Scripts -->
<script src="script.js"></script>
</head>
<body>
<h1>Word Game</h1>
<div id="board">
<p>Do you want to play? (yes/no)</p>
</div>
<div id="form">
<form>
<fieldset>
<input type="input" id="userTxt"></input>
<button type="button" id="btn" onclick = "post()">Send</button>
</fieldset>
</form>
</div>
</body>
</html>
CSS:
*{
margin-left: auto;
margin-right: auto;
}
h1 {
text-align: center;
}
#board {
width: 75%;
height: 100%;
min-height: 300px;
border: 1px solid black;
}
#board p {
padding-left: 3%;
}
#form {
width: 75%;
margin-top: 3%;
}
input {
margin: auto;
display: block;
}
button {
display: block;
clear: both;
margin-left: auto;
margin-right: auto;
}
JavaScript:
var post = function() {
var userTxt = document.getElementById("userTxt");
var boardId = document.getElementById("board");
var text = userTxt.value;
boardId.innerHTML = "<p>- " + text + "</p>";
}
Now, the function works alright. But,
if you check the code you'll see that, for example if you'd write "p" in the box and submit it and then for example "e", the "p" will CHANGE to "e" and not add a new <p></p> to the board. How do I make it add a new element, and not replace the old element?
Try to just concat the innertext:-
var post = function() {
var userTxt = document.getElementById("userTxt");
var boardId = document.getElementById("board");
var text = userTxt.value;
boardId.innerText = boardId.innerText.trim();
boardId.innerText += " - " + text;
}
Edit the html to add an id directly to your <p> tag for ease of access.
<div id="board">
<p id="text-container">Do you want to play? (yes/no)</p>
</div>
And change the function as this
function post() {
var userTxt = document.getElementById("userTxt");
var boardId = document.getElementById("text-container");
var text = userTxt.value;
if (boardId.textContent == "Do you want to play? (yes/no)") {
boardId.textContent = "- " + text;
} else {
boardId.textContent += text;
}
}
Try it here on this fiddle.
Related
How to add new tags to text that is already present inside some element. Is there a better way than copying the text into new element and then deleting from old?
In the example below, text Hello World! is already present inside a div. The goal is to add h1 around the text.
<head>
<script>
let myFunction = function() {
let d = document.getElementById("testId");
let h = document.createElement("h1");
h.textContent = d.textContent;
d.textContent = "";
d.appendChild(h);
};
</script>
<style>
.testClass {
height: 100px;
margin: auto;
width: 200px;
border-style: solid;
text-align: center;
}
</style>
</head>
<body>
<div id="testId" class="testClass">Hello World!</div>
<button onclick="myFunction()">Click Here</button>
</body>
This question is likely going to get multiple opinions.
Mine is that you are doing it just fine using the DOM API. However, if you understand the performance and security implications of .innerHTML, you could do this:
<head>
<script>
let myFunction = function() {
let d = document.getElementById("testId");
d.innerHTML = "<h1>" + d.textContent + "</h1>";
};
</script>
<style>
.testClass {
height: 100px;
margin: auto;
width: 200px;
border-style: solid;
text-align: center;
}
</style>
</head>
<body>
<div id="testId" class="testClass">Hello World!</div>
<button onclick="myFunction()">Click Here</button>
</body>
In my javascript Program I have created a page to display an image and description at the same time when the user moves the mouseOver a link, and display a different image with no description when user moves the mouseOut of link. but I am not getting output on mouseOver/mouseOut as per expectation. Can anyone help ? I did the following:
(i) When the mouse moves over a link, I am calling the function by passing the text and image.
(ii) When the mouse moves out,I am calling the function by passing a blank text and a different image. This image is the same when the mouse is out from all the links.
code:
<!DOCTYPE html>
<html>
<head>
<style>
div a{
text-decoration: none;
font-size: 25px;
color: yellow;
}
.container {
width: 1002px;
margin-top: 50px;
margin-left: 130px;
}
#first {
width: 400px;
float: left;
height: 350px;
background-color:#f4b2ef;
border:inset;
}
#second {
width: 590px;
float: right;
height: 350px;
color: white;
border:inset;
}
</style>
<title>mouseover/out</title>
</head>
<body background="images/back.jpg">
<h1 style="text-align: center; font-family: monospace; color: white; font-size: 35px">PHOTO CONTEST </h1>
<div class='container'>
<div id="first">
<p style="text-align:center">First Place Winner</p>
<p style="text-align:center">Third Place Winner</p>
<p style="text-align:center">Merit Prize Winner</p>
<p id="para"> </p>
</div>
<div id="second">
<img id="default" src="images/default.jpeg" alt=""
width="590" height="350"/>
</div>
</div>
<script>
var blank = "";
var txt = "Beautiful fall";
var txt2 = "Natural pictures are beautiful";
var txt3 = "Beautiful Rose garden"
var w1 = new Image(590, 350);
var w2 = new Image(590, 350);
var w3 = new Image(590, 350);
var def = new Image(590, 350);
w1.src = "images/w1.jpeg";
w2.src = "images/w2.jpg";
w3.src = "images/w3.jpg";
def.src = "images/default.jpeg";
function replaceImg(txt, w1) {
w1.src;
var para = document.getElementById("para").innerHTML = txt;
}
function defaultImg(blank, def) {
def.src;
var para = document.getElementById("para").innerHTML = blank;
}
</script>
</body>
</html>
I amputate your code just to demonstrate that you can make it work by using js function addEventListener("moustover",callback) to do the work. I have never wrote code in your way so I don't know how to improve upon yours. You should always seperate your html css and js codes.
var firstTarget = document.querySelector("#first");
firstTarget.addEventListener("mouseover",function(){
document.querySelector("#target-image").setAttribute("src",'https://via.placeholder.com/350x150)');
})
firstTarget.addEventListener("mouseout",function(){
document.querySelector("#target-image").setAttribute("src",'#');
})
<!DOCTYPE html>
<html>
<head>
<title>mouseover/out</title>
</head>
<body background="images/back.jpg">
<h1 style="text-align: center; font-family: monospace; color: white; font-size: 35px">PHOTO CONTEST </h1>
<div class='container'>
<div id="first">
First Place Winner</p>
</div>
<div>
<img id="target-image" src="#" alt="">
</div>
</div>
I've a few dynamic elements being generated on click of a button.
On click of this button, I get dynamic divs generated which also contain link.
I get only the first href attribute value("link0.com") in the array "linkArr".
How do I get all of the href attributes stored inside this array?
Here's my code.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<style>
.parent {
height: 25%;
width: 90%;
padding: 1%;
margin-left: 1%;
margin-top: 1%;
border: 1px solid black;
}
.parent:nth-child(odd){
background: skyblue;
}
.parent:nth-child(even){
background: green;
}
</style>
</head>
<body>
<button class="btn btn-primary" onclick="getData()">Get data</button>
<div class="box">
</div>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
var content = "";
linkArr = new Array();
function getData(){
var count = 0;
for(count=0; count<5; count++) {
content+= '<div class="container-fluid parent"><div class="row"><div class="col-md-6">Number: '+count+'</div><div class="col-md-6">Link'+count+'</div></div></div>';
}
$('.box').html(content);
$('.box').each(function(){
linkArr.push($(this).find('.mylink').attr('href'));
console.log(linkArr);
});
}
</script>
</body>
</html>
Since each of the link elements has it's own class, why not to just get all .myLink elements with a selector and push href attribute of each of them to the linkArr array?
var content = "",
linkArr = [];
function getData() {
var count = 0;
for (count = 0; count < 5; count++) {
content += '<div class="container-fluid parent"><div class="row"><div class="col-md-6">Number: ' + count + '</div><div class="col-md-6">Link' + count + '</div></div></div>';
}
$('.box').html(content);
$('.mylink').each(function() {
linkArr.push($(this).attr('href'));
});
console.log(linkArr);
}
.parent {
height: 25%;
width: 90%;
padding: 1%;
margin-left: 1%;
margin-top: 1%;
border: 1px solid black;
}
.parent:nth-child(odd) {
background: skyblue;
}
.parent:nth-child(even) {
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn btn-primary" onclick="getData()">Get data</button>
<div class="box"></div>
There is only one .box element, so $('.box').each is only going to run one time. Change your selector to iterate over the child elements and it should work:
$('.box .container-fluid parent').each(function(){
linkArr.push($(this).find('.mylink').attr('href'));
console.log(linkArr);
});
I am displaying UV index from json data, however I can't figure how to display the colour relevant to the UV index value.
so far here is what I have:
document.getElementById("uvIndex").innerHTML = getUvIndex();
function getUvIndex() {
miliVolts = 0;
text = "UV Index: "
if (miliVolts < 50) {
text += " 0 <div style='width: 20px; height: 20px; display: inline-block";
text += "background-color: rgba(0,190,0, 0.5); position: relative; left: 5px;";
text += "top: 5px;background-color: rgba(0,190,0, 0.5);' ";
text += "width='20'></div>";
text += " <div>Exposure Level None - No Light</div>";
}
return text;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="label label-default" id="uvIndex">Loading UV index.</div>
but what I am thinking from bootstrap, I can apply class i.e. class="label label-default"something other based on value.
i think you can use HTML DOM className Property or jquery add class method.
Just customize it to your need.
HTML class name property example:
<!DOCTYPE html>
<html>
<head>
<style>
.mystyle {
width: 300px;
height: 100px;
background-color: coral;
text-align: center;
font-size: 25px;
color: white;
margin-bottom: 10px;
}
</style>
</head>
<body>
<p>Click the button to set a class for div.</p>
<div id="myDIV">
I am a DIV element
</div>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById("myDIV").className = "mystyle";
}
</script>
</body>
</html>
I want to change the color of specific text in viewpoint in occurrence of the word “Sinux” (case insensitive) should be formatted in bold and red. I just able to bind the values my code is below
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<h3>Write Someting in the below input area </h3>
Text Area: <input ng-model="name">
<h1>{{name}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "Please enter your text input";
});
</script>
</body>
</html>
I change the above code and able to highlighted word in the viewpoint area. But problem is in My text box area I have to write from the second line and then my writings are showings in first line. My question is I want to write from top of the text area and writings should be visible in below instead of above.
index.html file is
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.textarea {
font-family: arial;
font-size: 12px;
border: 0;
padding: 0;
width: 700px;
height: 200px;
}
.realTextarea {
margin: 0;
background: transparent;
position: absolute;
z-index: 999;
}
.overlayTextarea {
margin: 0;
position: absolute;
top: 1;
left: 1;
z-index: 998;
}
.textareaBorder {
border: groove 1px #ccc;
position: relative;
width: 702px;
height: 202px;
}
.highlight {
background: red;
}
</style>
</head>
<div class="textarea textareaBorder">
<textarea id="myTextarea" onkeyup="doit();" class="textarea realTextarea"></textarea>
<div id="myOtherTextarea"></div>
</div>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
app.js file is
var _terms = ['Sinux'];
function preg_quote(str) {
return (str + '').replace(/([\\\.\+\*\?\[\^\]\$\(\)\{\}\=\!\<\>\|\:])/g, "\\$1");
}
function doit() {
var s = myTextarea.value;
for (i = 0; i < _terms.length; i++)
s = s.replace(new RegExp(preg_quote(_terms[i]), 'gi'), '<span class="highlight">' + _terms[i] + '</span>');
myOtherTextarea.innerHTML = s.replace(new RegExp(preg_quote('\r'), 'gi'), '<br>');
}