So, I'm using an onclick function to toggle a div's visibility, like so:
<div class="div1" v-show="expandDiv">
<div class="div2" v-on:click="expandDiv = !expandDiv">
This works great, but I'm getting problems when I want to use two on-clicks. I have a button which I want to use to run a function that adds items to a cart (addCart(item)) and I also want this function toggle the visibility of my div. Now, you can't two v-on:click so I created another function:
expander() {
cartAdd(item);
expandDiv = !expandDiv;
}
when I run this function on my v-on:click it doesn't seem to want to work as it only adds it to the cart, but doesnt expand my div. I'm probably syntactically wrong but I can't find a solution.
Would greatly appreciate some help on this one!
Try:
this.expandDiv = !this.expandDiv
Related
I began using svelte for a recent project, and although I like the workflow of the framework so far, I've yet to get a single function to work successfully.
Currently, I'm trying to change the innerHTML of a series of objects using functions.
Below is my code:
<head>
<script>
export let question1() {
document.getElementByClass(questionBox).innerHTML = "True or False?";
document.getElementById(ans_1).innerHTML = "True";
document.getElementById(ans_2).innerHTML = "False";}
</script>
</head>
<body>
<div class="container">
<button on:click={question1} class="startButton">Start Game</button>
<div class="box"><span id="questionBox">...</span></div>
</div>
<div class="option-container">
<button class="option" id="ans_1">option1</button>
<button class="option" id="ans_2">option2</button>
</div>
</body>
There is an error marked beneath my function when I call it on:click in the button, and that error reads as follows:
'question1' is not defined. Consider adding a <script> block with 'export let question1' to declare a propsvelte(missing-declaration)
I am quite new to svelte and it's entirely possible I misunderstood something structurally within my code, but I've checked all over and can't seem to find anything that quite addresses my problem.
Any help would be quite appreciated. Perhaps I just need some new eyes on this.
Thank you.
Here's the list of things you might have gotten wrong.
Function declaration
This is valid:
function question1() {
//dosomething
}
This is valid too (arrow function):
let question1 = () => {
//dosomething
}
But this is not a correct way:
let question1() {
//dosomething
}
getElementByClass is not a correct method. You probably meant getElementsByClassName.
document.getElementByClassName("questionBox").innerHTML = "something"
Note that if you have more than one element with that class name, only the first item will be affected.
Easiest way to get a single element is to use:
//by class name
document.querySelector(".classname")
//by id
document.querySelector("#id")
//by element type
document.querySelector("div")
You dont need to add <head> tag in your code. Each svelte file can have a <script> and <style> element in the component at top level.
You are trying to change text in elements in a Vanilla JS way. You should probably populate the DOM using data so that you are taking advantage of Svelte's amazing reactivity. Look at this REPL to see a replication of what you are trying to do in a more Svelty way. Basically, use data to dynamically render the DOM elements. That way, you will never directly manipulate the DOM Elements. Just change your data and Svelte takes care of changing the DOM.
https://svelte.dev/repl/8316ae63d83b443aaef5aa7b29c36dc1?version=3.53.1
Use betternames for your functions. question1 as a function name is not descriptive of what you are doing inside.
If you still want to modify the DOM elements directly, you can bind them to variables like so and change text like so:
https://svelte.dev/tutorial/bind-this
I'm trying to change the attribute of an object with removeAttribute to take away the hidden status of it but so far nothing seems to work.
My code seems to have no effect. Am I doing something wrong?
function changePage() {
document.getElementById.("p2");
p2.removeAtribute.("hidden") ;
}
I've also tried it all on one line as well like so
function changePage() {
document.getElementById.("p2").p2.removeAtribute.("hidden") ;
}
I've never seen the use of dots before opening parentheses.
E.g.
document.getElementById.("p2").p2.removeAtribute.("hidden") should be document.getElementById("p2").removeAtribute("hidden")
(You are also referencing the element by id after you just retrieved it, which is unnecessary.)
Your first example didn't work because you retrieved the element and did nothing with it, then tried to access a p2 variable that wasn't declared. Again, you also have the . before parentheses.
Here's the js example:
function changeVisibility()
{
var p2 = document.getElementById('p2');
switch (p2.style.visibility)
{
case 'hidden':
document.getElementById('p2').style.visibility = 'visible';
break;
case 'visible':
document.getElementById('p2').style.visibility = 'hidden';
break;
}
}
<div id="p2" style="visibility:hidden">
test
</div>
<br />
<button onclick="changeVisibility()">
change visibility with basic js
</button>
And here's the jQuery example:
function changePage()
{
$('#p2').toggle();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="p2" style="display:none">
test
</div>
<br />
<button onclick="changePage()">
change visibility with basic js
</button>
The basic JS version uses the visibility style, and you can see that it doesn't collapse the element, it only makes it invisible.
jQuery has a nice built-in .toggle function that changes the display of the element. If it is hidden, it collapses the element. When the element is displayed, it is re-assigned whatever the display style is for that element. Building that in basic js would take a lot more work, as you are then tracking state (if you want to make the method reusable). You can make jQuery work similarly to the basic js version if you use the css properties, but toggle is quite nice and simple.
Your main issue is that you were mixing the getting of the element with methods that are only available on jQuery objects. I suggest reading the jQuery tutorials for basic accessors, which can get elements by id, class name, etc.
I ran into a issue where using polymer I would like to toggle through two divs, the problem I have is, I want to use the polymer standard of toggling where they use: hidden?="{{toggleMe}}" as a attribute on the div and just bind it then make a function that would do the toggling or the show/hide that will look like this:
<div hidden?="{{divOne}}">TEST</div>
<div hidden?="{{divTwo}}">TEST2</div>
<a on-tap="{{change}}">Toggle</a>
<script>
Polymer('componentName',{
change: function(){
this.divOne = !this.divOne;
this.divTwo = !this.divTwo;
}
})
</script>
This above will show both and hide both together, I want the one displayed and the other hidden, So essentially switching between the two while starting with the one hidden and the other active, and then swapping states from there.
I tried this also with no luck as I can't do this or use the '!' on the left hand side:
!this.divOne = this.divOne;
this.divTwo = !this.divTwo;
Thanks for reading
this.divOne = !(this.divTwo = this.divOne);
I have found a fix to the question, i assigned true and false values to the bind hidden values before I used them (this assigns a true for hidden state and false for the separate values), Then when clicking on the toggle bind I just used the code of #Zikes to have the toggle work(thanks for that).
current working code
<div hidden?="{{divOne}}">TEST</div>
<div hidden?="{{divTwo}}">TEST2</div>
<a on-tap="{{change}}">Toggle</a>
<script>
Polymer('componentName',{
divOne: false,
divTwo:true,
change: function(){
this.divOne = !(this.divTwo = this.divOne);
}
})
</script>
Hope this can help clear someone in the future
I am using this a lot and I feel like I'm doing it wrong.
in ng-repeat, I want to show some part, if the condition is right but I don't want it to be in loop, I need to display it when I want and where I want.
for example:
$scope.selectedItemId is defined and changed from javascript dynamically.
<div ng-repeat=“item in items”>
<div>{{item.name}}</div>
<div ng-if=“selectedItemId==item.id”>{{item.condition}}</div>
</div>
At the example, instead of item.condition, it may be a rest result or a directive too.
It looks like it checks for every item in the loop. I want to put the content to there dynamically. When user clicks a button which sets the selected item, I want it to show the content of it where ng-if is now.
You can do it without the loop. For example, your html:
<button ng-click="setItem('uniq-id')">click me</button>
<div>{{selectedItem.condition}}</div>
And js (I'm use lodash for simplification):
$scope.setItem = function (id) {
$scope.selectedItem = _.find($scope.items, {id: id});
};
I hope you guys can give me a push in the right direction as this problem has been eating me up all day now..
What I'm basicly trying to accomplish is this. I have several div's on a page that can be collapsed independently from eachother with the use of a button. Every div has it's own specific ID, generated with a string of static text, and a numeric value based on a auto-incremented database-value. This ensures I never have two div's with the same ID on one page. To target each specific div with Javascript (jQuery) I use the following code:
http://jsfiddle.net/LU7QA/0/
This works really well and does what it's supposed to do. Only there is one problem. On every page frefresh, every div that was opened is closed. Everything resets, and that's why I want to use JQuery Cookies in this construction. Only problem is, I know how it works, but I can't get it to work in this specific construction as it has to deal with a completely unique ID every time and needs to store the values of that particular ID.
As seen here: http://jsfiddle.net/LU7QA/1/
I tried to fiddle around with it but I can't seem to get it working properly and I'm starting to lose my sight on the problem..
<div>
<button class="button_slide" value="1">Show hide</button>
</div>
<div id="slidingDiv_1" class="slidingDiv">Stuff</div>
<div>
<button class="button_slide" value="2">Show hide</button>
</div>
<div id="slidingDiv_2" class="slidingDiv">Stuff</div>
function initMenu() {
$(".slidingDiv").hide();
// Toggle Field
$(".button_slide").click(function(){
//alert($(this).val()); debugging purposes
var sliding_id = $(this).val();
div_sliding_id = '#slidingDiv_'+sliding_id;
$(div_sliding_id).next().slideToggle('slow', function() {
$.cookie(div_sliding_id, $(this).is(':hidden') ? "closed" : "open");
return false;
});
});
$('.button_slide').each(function() {
var sliding_id = $(this).val();
div_sliding_id = '#slidingDiv_'+sliding_id;
if ($.cookie(div_sliding_id) == "open") $(this).next().show();
});
}
jQuery(document).ready(function() {initMenu();});
May you have missed a dot on the last *button_slide* declaration?
Btw, look at https://code.google.com/p/sessionstorage/