toggle function doesn't work on added input - javascript

the toggle function work in descrip and example as shown, but the problem is it does not work when I add a new definition via the input from the user. please help!
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.descrip').click(function(){
$(this).next('.def').slideToggle("slow");
});
});
function addDef () {
//window.alert (1);
var def= document.getElementById("defInput").value;
//window.alert (def);
document.getElementById("addf").innerHTML += "<div class= 'descrip'> descrip </div>";
document.getElementById("addf").innerHTML += "<div class= 'def'> "+def+" </div>";
$(document).ready(function(){});
}
</script>
</head>
<body>
<div class = "descrip"> descrip</div>
<div class = "def"> example </div>
enter def for apple: <input type= "text" id = "defInput"> </input> <br> <br>
<button onclick="addDef()">ADD</button>
<div id = "addf"> </div>
</body>
</html>

Use event delegation
$(this).on("click", ".descrip", function() {
$(this).next('.def').slideToggle("slow");
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(this).on("click", ".descrip", function() {
$(this).next('.def').slideToggle("slow");
});
});
function addDef() {
//window.alert (1);
var def = document.getElementById("defInput").value;
//window.alert (def);
document.getElementById("addf").innerHTML += "<div class= 'descrip'> descrip </div>";
document.getElementById("addf").innerHTML += "<div class= 'def'> " + def + " </div>";
}
</script>
</head>
<body>
<div class="descrip">descrip</div>
<div class="def">example</div>
enter def for apple:
<input type="text" id="defInput">
<br>
<br>
<button onclick="addDef()">ADD</button>
<div id="addf"></div>
</body>
</html>

Related

JavaScript: innerHtml to change 'display' from '1' to '0' no errors on console

HTML File
<!DOCTYPE Html>
<html>
<head>
<script type= "text/javascript" src= "calc.js"></script>
</head>
<body>
<h1> Calculate away </h2>
<div id='display'>
<p>1</p>
</div>
</body>
</html>
JS File
document.addEventListener('DOMContentLoaded', turnOn)
function turnOn ()
{
document.getElementById('display').innerHtml = "`<p>0</p>`";
}
innerHTML is the correct name.
document.addEventListener('DOMContentLoaded', turnOn)
function turnOn () {
document.getElementById('display').innerHTML = "<p>0</p>";
}
Change document.getElementById('display').innerHtml to document.getElementById('display').innerHTML
Use document.querySelector just to replace the text of the p tag .
document.addEventListener('DOMContentLoaded', turnOn)
function turnOn() {
var getPElement = document.querySelector("#display p")
getPElement.innerHTML = 0;
}
<h1> Calculate away </h2>
<div id='display'>
<p>1</p>
</div>

JavaScript; REGEX between delimiters and separate by space

I have this code:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
window.onload = function() {
var e = document.getElementById("first"), n=document.getElementById("second");
e.addEventListener("input", function() {
n.value = e.value.match( /\<span class="my_class">(.+)\<\/span>/ )[1]
})
};
</script>
</head>
<body>
<input class="textfield" id="first"><br><br>
<input class="textfield" id="second">
</body>
</html>
When you insert <span class="my_class">test</span> in first field, second field will output test. This is exactly what I want.
But if I insert e.g. <span class="my_class">test</span> some text<span class="my_class">hello</span> I'm getting test</span> some text<span class="my_class">hello instead of test hello (separated by a space).
What am I doing wrong?
Use jquery construct to parse the HTML and get the value inside the markup span
DEMO
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function() {
var e = document.getElementById("first"),
n = document.getElementById("second");
e.addEventListener("input", function() {
var valueArr = [];
$(e.value).each(function(v, i) {
if (i.nodeName == "SPAN" && i.classList.contains( "my_class" ) ) {
valueArr.push($(i).text());
}
});
n.value = valueArr.join(" ");
})
};
</script>
</head>
<body>
<input class="textfield" id="first"><br><br>
<input class="textfield" id="second">
</body>
</html>

Displaying Images and Description in listview on html page from JSON object

I am newbie to javascript ,Help me to display image and description in list view on html page get from the json object ..
Here i am parsed a json object and retrieved image URL and image description. Now I have to display the Image and Description in listview on html page. But I am Not getting How..Plese help me to solve this..
Here is My HTML Page:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<link href="../css/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../js/jsonData.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#submit").click(searchAPI);
})
</script>
</head>
<body>
<input type="text" id="search1" value="search here" >
<button id="submit" >submit</button>
<div id="div1">
<img id="img" src="http://hdcomputerwallpaper.com/wp-content/uploads/2013/12/Puppy- images.jpg" style="width:200px;height:200px;">
<p id="p2"> </p>
</div>
</div>
</body>
</html>
My js file is:
function searchAPI(){
var searchText= $("#search1").val();
alert(searchText);
$.getJSON('http://api.duckduckgo.com/?q=ashok&format=json&pretty=1&callback=?',function(data){
for (var i = 0; i < data.RelatedTopics.length;i++) {
var desc= data.RelatedTopics[i].Text;
var url= data.RelatedTopics[i].Icon.URL;
}
});
}
Please help me How to display this Image and Description in list view like this
I think this works for you.
modify js like :
function searchAPI(){
var searchText= $("#search1").val();
alert(searchText);
var htmlContent="<ul>";
$.getJSON('http://api.duckduckgo.com/?q=ashok&format=json&pretty=1&callback=?',function(data){
for (var i = 0; i < data.RelatedTopics.length;i++) {
var desc= data.RelatedTopics[i].Text;
var url= data.RelatedTopics[i].Icon.URL;
htmlContent += "<li><img src='" + url + "' style='width:100px;height:100px;display:inline-block'/> <p style='display:inline-block'>"+desc+"</p></li>";
}
htmlContent += "</ul>";
$('#div1').html(htmlContent);
});
}

fail to focus on page load

I can focus on the text input when I click the button but it doesn't focus on the text input when page first loaded even though I am using the same function. How can I focus at the input textfield once the page is loaded ?
http://codepen.io/anon/pen/derwi
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script>
function generate_question (){
var num1 = Math.floor(Math.random()*10),
num2 = Math.floor(Math.random()*10);
$('.result').hide();
$('.left').html(num1 + ' x ' + num2 + ' = <input type="text" size="3" class="answer">');
$('.answer').val('');
$('.answer').focus();
$('.answer').keypress(function(e){
if (e.which == 13) {
if ($(this).val() == num1 * num2) {
$('.result').html('Very Good!');
$('.result').show();
} else {
$('.result').html('Try Again');
$('.result').show();
}
}
})
}
$(document).ready(function(){
generate_question();
$('#again').click(function(){
generate_question();
});
$('#again').keypress(function(e){
if (e.which == 32){
generate_question();
}
});
})
</script>
</head>
<body>
<div class="content">
<div class="left"></div>
<div class="result"></div>
</div>
<div class="instruction">
Hit enter to check your answer.
<button type='button' id='again' style='margin-top: 10px;'>Do another one?</button>
</div>
</body>
</html>
Try $('.answer').focus(); in your ready function
$( document ).ready(function(){
$('.answer').focus();
});
DEMO: http://plnkr.co/edit/EX0xS9d8o3TqUqiEOAL5?p=preview

textbox style following jquery mobile

i having problem in creating textbox using jquery that is implemented in webview. here is the code
<html>
<head>
<title>jQuery Mobile List Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script>
<script type="text/javascript">
var counter = 1;
$('#AddQuestion').live('pagecreate', function() {
$('#button').click(function() {
$('#TextBoxesGroup').append("<input type ='text' id='option" + counter + "' placeholder='option" + counter + "'>");
$('#TextBoxesGroup').textinput();
if (counter > 4) {
document.getElementById("button").style.display = 'none';
}
counter++;
});
});
</script>
</head>
<body>
<div data-role="page" id="AddQuestion">
<div data-role="header" data-position="fixed">
<h1>AddQuestion</h1>
</div>
<div data-role="content">
<form name="newdocument">
<div data-role="listview" id="TextBoxesGroup"></div>
<input type="button" value="Add Option" id="button">
</form>
</div>
</div>
</body>
</html>
i have tried this code in jsfiddle and when i press the add option button it shows unstyle textbox. what would be the problem?
You need to trigger create on the page to have jQuery mobile apply the additional markup and classes required for styling.
<script type="text/javascript">
var counter = 1;
$('#AddQuestion').live('pagecreate', function() {
$('#button').click(function() {
$('#TextBoxesGroup').append("<input type ='text' id='option" + counter + "' placeholder='option" + counter + "'>");
$('#TextBoxesGroup').textinput();
if (counter > 4) {
document.getElementById("button").style.display = 'none';
}
$('#AddQuestion').trigger('create');
counter++;
});
});
</script>

Categories