I'm trying to call specific div as per the input value. below is the expected result
If type "one" in input filed result should view as "Page one",
If type "two" in input filed result should be "Page two",
If type anything else in input filed result should be "Page three"
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div id="one" name="one" style="display:none;">
<h1>Page One</h1>
</div>
<div id="two" name="two" style="display:none;">
<h1>Page Two</h1>
</div>
<div id="three" name="three" style="display:none;">
<h1>Page Three</h1>
</div>
<input type="text" id="enter" name="enter" value="" />
<input type="button" value="Click here" onclick="test();">
<script>
function test() {
var v_input = document.getElementById("enter").value;
var v_one = "one";
var v_one = "two";
if (v_input = v_one) {
$('#one').show();
$('#two').hide();
$('#three').hide();
} else if (v_input = v_two) {
$('#one').hide();
$('#two').show();
$('#three').hide();
} else {
$('#one').hide();
$('#two').hide();
$('#three').show();
}
}
</script>
</body>
Please, advice how to fix this issue, thanks in advance
You can get the input from your textbox using:
const inputText = $("#enter").val();
And the you can select a given "page" to show using:
$("#" +inputText);
If the length of this selected item is 0 (which is fasley) then the page doesn't exist so you can then show the div with the id of three. If the length of the selected item is not zero (truthy) then that means the selected item exists, and so you can show it using:
$("#" +inputText).show();
You can also add a class called page to your div's so you can toggle their visibility more specifically and easily.
See working example below:
const test = function() {
const inputText = $("#enter").val();
$('.page').hide(); // hide all open pages (then later we will show the selected one)
const elemToShow = $("#" +inputText);
if(!elemToShow.length) {
$("#three").show();
} else {
$("#" +inputText).show();
}
}
.page {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="page" id="one" name="one">
<h1>Page One</h1>
</div>
<div class="page" id="two" name="two">
<h1>Page Two</h1>
</div>
<div class="page" id="three" name="three">
<h1>Page Three</h1>
</div>
<input type="text" id="enter" name="enter" value="one" />
<input type="button" value="Click here" onclick="test();">
You had various little mistakes. Re-assigning v_one variable, in if you should use == instead of = and you missed a }.I think that was all. If you already have jquery cdn defined delete mine.
<body>
<div id="one" name="one" style="display:none;">
<h1>Page One</h1>
</div>
<div id="two" name="two" style="display:none;">
<h1>Page Two</h1>
</div>
<div id="three" name="three" style="display:none;">
<h1>Page Three</h1>
</div>
<input type="text" id="enter" name="enter" value="" />
<input type="button" value="Click here" onclick="test();">
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script>
function test() {
var v_input = document.getElementById("enter").value;
var v_one = "one";
var v_two = "two";
if (v_input == v_one) {
$('#one').show();
$('#two').hide();
$('#three').hide();
}else if (v_input == v_two){
$('#one').hide();
$('#two').show();
$('#three').hide();
}else {
$('#one').hide();
$('#two').hide();
$('#three').show();
}
}
</script>
</body>
First, remove all inline javascript, then remove all inline styles.
Once we have that, give your elements a common class name, so that we can hide them in a single line.
After that, simply take the value and put it into the selector.
$('#btn').on('click', () => {
const value = $('#enter').val();
$('.showHide').hide();
$('#' + value).show();
});
.showHide {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="one" name="one" class="showHide">
<h1>Page One</h1>
</div>
<div id="two" name="two" class="showHide">
<h1>Page Two</h1>
</div>
<div id="three" name="three" class="showHide">
<h1>Page Three</h1>
</div>
<input type="text" id="enter" name="enter" value="" />
<input type="button" id="btn" value="Click here">
You have problem in defining the v_two and in if ==
function test() {
var v_input = document.getElementById("enter").value;
var v_one = "one";
var v_two = "two";
if (v_input == v_one) {
$('#one').show();
$('#two').hide();
$('#three').hide();
}
else if (v_input ==v_two){
$('#one').hide();
$('#two').show();
$('#three').hide();
}
else {
$('#one').hide();
$('#two').hide();
$('#three').show();
}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<body>
<div id="one" name="one" style="display:none;">
<h1>Page One</h1>
</div>
<div id="two" name="two" style="display:none;">
<h1>Page Two</h1>
</div>
<div id="three" name="three" style="display:none;">
<h1>Page Three</h1>
</div>
<input type="text" id="enter" name="enter" value="" />
<input type="button" value="Click here" onclick="test();">
</body>
You can try this
function test() {
var v_input = document.getElementById("enter").value;
var v_one = "one";
var v_two = "two";
// all are hidden
$('#one').hide();
$('#two').hide();
$('#three').hide();
var nameId = "#three"; // variable to get id or you can keep this as empty
if (v_input == v_one) {
nameId = '#one';
} else if (v_input == v_two) {
nameId = '#two'
} else {
nameId = '#three'; // you can use this section for default behaviour
}
// Show selected name
$(nameId).show();
}
Hope this helps!
try this and let me know is it helpful or not
function test() {
var v_input = document.getElementById("enter").value;
$('#three ,#one ,#two').hide();
if (v_input == "one" || v_input == "two") {
$('#' + v_input).show();
} else {
$('#three').show();
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="one" name="one" style="display:none;">
<h1>Page One</h1>
</div>
<div id="two" name="two" style="display:none;">
<h1>Page Two</h1>
</div>
<div id="three" name="three" style="display:none;">
<h1>Page Three</h1>
</div>
<input type="text" id="enter" name="enter" value="" />
<input type="button" value="Click here" onclick="test();">
What you will need, is a two way binding in pure java script to achieve your goal.
Here is the basic snippet for your code:
function DataBind(element, data) {
this.data = data;
this.element = element;
element.value = data;
element.addEventListener("change", this, false);
}
DataBind.prototype.handleEvent = function(event) {
switch (event.type) {
case "change": this.change(this.element.value);
}
};
DataBind.prototype.change = function(value) {
this.data = value;
this.element.value = value;
};
var obj = new DataBind(document.getElementById("enter"), "");
var pageField = obj.element;
pageField.onkeydown = updateNameDisplay;
pageField.onkeyup = updateNameDisplay;
pageField.onkeypress = updateNameDisplay;
function updateNameDisplay() {
//key down event
}
function test() {
var v_one = "one";
var v_two = "two";
if (obj.element.value === v_one) {
$('#one').show();
$('#two').hide();
$('#three').hide();
}
else if (obj.element.value === v_two){
$('#one').hide();
$('#two').show();
$('#three').hide();
}
else {
$('#one').hide();
$('#two').hide();
$('#three').show();
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="one" name="one" style="display:none;">
<h1>Page One</h1>
</div>
<div id="two" name="two" style="display:none;">
<h1>Page Two</h1>
</div>
<div id="three" name="three" style="display:none;">
<h1>Page Three</h1>
</div>
<input type="text" id="enter" name="enter" value="" />
<input type="button" value="Click here" onclick="test();">
probably it is because you re-assign the value of var v_one
var v_one = "one";
var v_one = "two";
There are many issues in your JavaScript:
Missing the last bracket.
Missing assignment of v_two.
For comparing you have used single equal (=) it should be double equals(==).
<script type="text/javascript">
function test() {
var v_input = document.getElementById("enter").value;
var v_one = "one";
var v_two = "two";
if (v_input == v_one) {
$('#one').show();
$('#two').hide();
$('#three').hide();
}
else if (v_input == v_two){
$('#one').hide();
$('#two').show();
$('#three').hide();
}
else {
$('#one').hide();
$('#two').hide();
$('#three').show();
}
}
I have updated your javascript hope it helps.
Related
So when I click the checkbox, the background colour changes. I want this function to work for all checkboxes, but it is currently only working for the first one.
function obtained() {
var obt = document.getElementsByClassName("obtained")[0];
var col = document.getElementsByClassName("entry")[0];
if (obt.checked == true) {
col.style.backgroundColor = "#2ab320";
} else {
col.style.backgroundColor = "#d3d5db";
}
}
<div class="entry">
<img class="class-name" src="image1.png">
<b>title1</b><br>content1
<input
type="checkbox"
class="obtained"
onclick="obtained()"
name="obtained"
>
</div><hr>
<div class="entry">
<img class="class-name" src="image2.png">
<b>title2</b><br>content2
<input
type="checkbox"
class="obtained"
onclick="obtained()"
name="obtained"
/>
</div><hr>
<div class="entry">
<img class="class-name" src="image3.png">
<b>title3</b><br>content3
<input
type="checkbox"
class="obtained"
onclick="obtained()"
name="obtained"
/>
</div><hr>
You could pass an instance of the checkbox to the function like so:
function obtained(element) {
var col = element.parentElement;
if (element.checked == true) {
col.style.backgroundColor = "#2ab320";
} else {
col.style.backgroundColor = "#d3d5db";
}
}
<div class="entry">
<img class="class-name" src="image1.png">
<b>title1</b><br>content1
<input
type="checkbox"
class="obtained"
onclick="obtained(this)"
name="obtained"
>
</div><hr>
<div class="entry">
<img class="class-name" src="image2.png">
<b>title2</b><br>content2
<input
type="checkbox"
class="obtained"
onclick="obtained(this)"
name="obtained"
/>
</div><hr>
<div class="entry">
<img class="class-name" src="image3.png">
<b>title3</b><br>content3
<input
type="checkbox"
class="obtained"
onclick="obtained(this)"
name="obtained"
/>
</div><hr>
In cases like this one you should declare a helper function:
function makeTogglable(element) {
const obt = element.querySelector(".obtained");
obt.addEventListener("click", () => {
if(obt.checked == true) {
element.style.backgroundColor = "#2ab320";
} else {
element.style.backgroundColor = "#d3d5db";
}
});
}
Then you can apply it your HTML elements, for example:
document.querySelectorAll('.entry').forEach(e => makeTogglable(e));
Edit: forgot about listeners
I have this simple code, and i can't understand why it is not working.
<div>
<input type="button" class="button" value="Add A Site" onclick="Div();" />
</div>
<script type="text/javascript">
function Div() {
var E = document.getElementsByClassName('Form');
if (E.style.display == 'none') {
E.style.display = 'block';
this.value = "Close";
} else {
S.style.display = 'none';
this.value = "Add A Site";
}
}
</script>
<div class="Form" style="display:none;">
<h1>Example</h1>
</div>
user Form which you are trying to access is inside div.form so you have to access that like below....I tested this, its working. the content in Form is displaying
<input type="button" class="button" value="Add A Site" onclick="Div();" />
<script type="text/javascript">
function Div() {
var E= document.getElementsByClassName('Form')[0];
if (E.style.display=='none'){
E.style.display='block';
this.value="Close";
}else {
S.style.display='none';
this.value="Add A Site";
}
}
</script>
<div class="Form" style="display:none;">
<h1>Example</h1></div>
<script>
function Div() {
var E = document.getElementsByClassName('Form')[0];
if (E.style.display==='none') {
E.style.display='block';
this.value=Close;
} else {
E.style.display = 'none';
this.value = 'Add A Site';
}
}
</script>
<input type="button" class="button" value="Add A Site" onclick="Div()" />
<div class="Form" style="display:none;">
<h1>Example</h1>
</div>
This should work for you.
am using pagebeforeshow to a page to getjson data and going back from that page displaying the same page again and again and after again clicking on back going to before page, same with going to next page from that particular page. any suggestion please thanks.
code is as follows,
$(document).on('pagebeforeshow', '#pagethree', function(e) {
//alert("inpGrid");
var i = 0;
var url = "http://192.168.0.101:8080/iConfig/html5_XV/slideDemo/json/listinp.json";
// var url = "http://api.openweathermap.org/data/2.5/forecast?lat=35&lon=139&callback=?" ;
$.getJSON(url, function(res) {
console.log(res)
var attr = "";
$.each(res.response.output.records, function(i, v) {
$.each(res.response.output.fieldInfo, function(index, value) {
if (index == 0 && offset==v[value["label"]]) {
attr =1;
}
if(attr == 1){
if(index == 0){
document.getElementById('inpName').value = v[value["label"]];
inpName = v[value["label"]];
}
if(index == 1){
document.getElementById('inpAlias').value = v[value["label"]];
inpAlias = v[value["label"]];
}
if(index == 2){
document.getElementById('inpDataType').value = v[value["label"]];
inpDataType = v[value["label"]];
}
if(index == 3){
document.getElementById('inpDefault').value = v[value["label"]];
inpDefault = v[value["label"]];
}
if(index == 4){
document.getElementById('inpVisible').value = v[value["label"]];
inpVisible = v[value["label"]];
attr = "";
}
}
});
});
});
});
and pagethree.html looks like
<html>
<body>
<div data-role="page" data-dialog="true" id="pagethree" data-close-btn="none">
<div data-role="header">
<h1>Selected Input</h1>
</div>
<div data-role="main" class="ui-content" style="height:300px;" >
<div class="ui-field-contain">
<fieldset data-role="controlgroup">
<div data-role="fieldcontain">
<label for="name">Name:</label>
<input type="text" name="inpName" id="inpName" disabled="disabled"/>
</div>
<div data-role="fieldcontain">
<label for="name">Alias:</label>
<input type="text" name="inpAlias" id="inpAlias"/>
</div>
<div data-role="fieldcontain">
<label for="name">Data Type:</label>
<input type="text" name="inpDataType" id="inpDataType" disabled="disabled"/>
</div>
<div data-role="fieldcontain">
<label for="name">Default Value:</label>
<input type="text" name="inpDefault" id="inpDefault" />
</div>
<div data-role="fieldcontain">
<label for="name">Visibility:</label>
<select name="inpVisible" id="inpVisible">
<option value="0">0</option>
<option value="1">1</option>
</select>
</div>
</fieldset>
</div>
back
Go to Page One
</div>
<div data-role="footer">
<h1>Footer Text in Dialog</h1>
</div>
</div>
</body>
</html>
I have 2 div tags in my HTML code and I have defined a class by which I can expand or hide them.The problem that I have is the fact that when I click on one of the the value of the other changes.
<HTML>
<BODY>
<FORM>
<script language="JavaScript">
function setVisibility(id) {
if (document.getElementById('btnshowhide').value == '-') {
document.getElementById('btnshowhide').value = '+';
document.getElementById(id).style.display = 'none';
} else {
document.getElementById('btnshowhide').value = '-';
document.getElementById(id).style.display = 'inline';
}
}
</script>
<FIELDSET style="width: 600px;">
<LEGEND>
<input type=button name=type id='btnshowhide' value='+' onclick="setVisibility('div1');" ;/>Insert Data:</LEGEND>
<DIV id="div1" style="display: none;">
<LABEL for="351fef76-b826-426f-88c4-dbaaa60f886b">Name:</LABEL>
<TEXTAREA id="351fef76-b826 -426f-88c4-dbaaa60f886b" name="txtname" value="Name" type="text" title="Name:">Name</TEXTAREA>
<BR>
<LABEL for="02973dcc-5677-417c-a9bf-1578f58923ef">Family:</LABEL>
<TEXTAREA id="02973dcc-5677-417c-a9bf-1578f58923ef" name="txtFamiy" value="Family" type="text" title="Family:">Family</TEXTAREA>
<BR>
</DIV>
</FIELDSET>
<BR>
<FIELDSET style="width: 600px;">
<LEGEND>
<input type=button name=type id='btnshowhide' value='+' onclick="setVisibility('div2');" ;/>Insert Data:</LEGEND>
<DIV id="div2" style="display: none;">
<LABEL for="d8876943-5861-4d62-9249-c5fef88219fa">Type of property</LABEL>
<SELECT id="d8876943-5861-4d62-9249-c5fef88219fa" name="PropertyType" value="" type="select" title="Type of property"></SELECT>
<BR>
</DIV>
</FIELDSET>
<BR>
</FORM>
</BODY>
</HTML>
I tried changing the Ids of my buttons but nothing changed.
change you buttons to --
<input type="button" name="type" id="btnshowhide1" value="+" onclick="setVisibility('div1',this.id);";/>
and
<input type="button" name="type" id="btnshowhide2" value="+" onclick="setVisibility('div2',this.id);";/>
And use following function --
function setVisibility(id,buttonid) {
if(document.getElementById(buttonid).value=='-'){
document.getElementById(buttonid).value = '+';
document.getElementById(id).style.display = 'none';
}
else{
document.getElementById(buttonid).value = '-';
document.getElementById(id).style.display = 'inline';
}
}
DEMO
First of all, you shouldn`t have two elements with same ID. You should use class for it.
And it happens because you have both buttons with id="btnshowhide" so when you are trying to do document.getElementById('btnshowhide').value it matches you both buttons.
you can do something like this
<script language="JavaScript">
function setVisibility(id,input)
{
if(input.value=='-')
{
input.value = '+';
document.getElementById(id).style.display = 'none';
}
else
{
input.value = '-';
document.getElementById(id).style.display = 'inline';
}
}
</script>
and in your inputs
onclick="setVisibility('div1', this);"
onclick="setVisibility('div2', this);"
I am trying to write a javascript function that will search all of the specified divs in a html page for the substring contained in my search bar. How can I do this simply?
Here is my code so far, I have it working so that the showMe method will only display the divs selected, I just need the substring code to work now. Could someone please help?
<html>
<head>
<script type="text/javascript">
<!--
function dynamicSearch() {
var val = document.getElementById('search').value;
if (val == '')
val = '-1';
var srch = new RegExp(val, "gi");
var els = document.getElementsByClassName('row');
for (var idx in els) {
if (idx != parseInt(idx))
continue;
var el = els[idx];
if (typeof(el.innerHTML) !== 'undefined') {
console.log(el.innerHTML);
if (srch.test(el.innerHTML)) {
el.style.display = 'block';
} else {
el.style.display = 'none';
}
}
}
}
function showMe (it, box) {
var vis = (box.checked) ? "block" : "none";
document.getElementById(it).style.display = vis;
}
//-->
</script>
</head>
<body>
<form>
<label for="search">Search:</label>
<input type="text" name="search" id="search" onkeyup="dynamicSearch()"/>
<input type="checkbox" name="modtype" value="value1" onclick="showMe('div1', this)" />value1
<input type="checkbox" name="modtype" value="value2" onclick="showMe('div2', this)" />value2
<input type="checkbox" name="modtype" value="value3" onclick="showMe('div3', this)" />value3
<input type="checkbox" name="modtype" value="value4" onclick="showMe('div4', this)" />value4
<input type="checkbox" name="modtype" value="value5" onclick="showMe('div5', this)" />value5
<div class="row" id="div1" style="display:none">Show Div 1</div>
<div class="row" id="div2" style="display:none">Show Div 2</div>
<div class="row" id="div3" style="display:none">Show Div 3</div>
<div class="row" id="div4" style="display:none">Show Div 4</div>
<div class="row" id="div5" style="display:none">Show Div 5</div>
</form>
</body>
</html>
This sort of stuff is a lot easier with jQuery.
For example, your dynamicSearch function could be replaced with this:
function dynamicSearch() {
var val = $('#search').val();
if (val == '') val = '-1';
var srch = new RegExp(val, "gi");
$('.row').each(function(i, el) {
if ($(this).text().match(srch)) {
$(this).show();
} else {
$(this).hide();
}
});
}
and you can get animation effects for free too, which you can't easily do just be setting the CSS display property.
I've put a working fiddle up at http://jsfiddle.net/alnitak/nLxc4/ which I think does what you're asking for.